.emerald-alert {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--emerald-spacing-2xs, 4px);
    padding: var(--emerald-spacing-s, 12px);
    border-radius: var(--emerald-radius-xl, 12px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-alert-accent, transparent);
    box-shadow: var(--emerald-shadow-m, 0 2px 4px 0 rgba(51, 51, 51, 0.2));
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b2-size, 14px);
    line-height: var(--emerald-text-b2-height, 21px);
    color: var(--emerald-on-surface, #2b2d2e);
    width: 100%;
}
.emerald-alert[data-variant='error'] {
    --emerald-alert-accent: var(--emerald-status-danger-br, #c61424);
    background: var(--emerald-status-danger-bg, #ffebee);
}
.emerald-alert[data-variant='success'] {
    --emerald-alert-accent: var(--emerald-status-success-br, #1fae60);
    background: var(--emerald-status-success-bg, #e7fff2);
}
.emerald-alert[data-variant='info'] {
    --emerald-alert-accent: var(--emerald-status-info-br, #3a70e2);
    background: var(--emerald-status-info-bg, #e4f2ff);
}
.emerald-alert[data-variant='warning'] {
    --emerald-alert-accent: var(--emerald-status-warning-br, #ffcf06);
    background: var(--emerald-status-warning-bg, #fff7e1);
}
.emerald-alert__title {
    margin: 0;
    font-weight: var(--emerald-text-b2-bold-weight, 600);
}
.emerald-alert__description {
    margin: 0;
    color: var(--emerald-on-surface-variant, #757e85);
}

.emerald-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--emerald-radius-full, 999px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.2));
    background: var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-neutral-800, #636a70);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    user-select: none;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.emerald-avatar[data-size='sm'] {
    width: var(--emerald-control-avatar-sm, 32px);
    height: var(--emerald-control-avatar-sm, 32px);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: var(--emerald-text-b3-weight, 400);
}
.emerald-avatar[data-size='md'] {
    width: var(--emerald-control-avatar-md, 40px);
    height: var(--emerald-control-avatar-md, 40px);
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: var(--emerald-text-b2-weight, 400);
}
.emerald-avatar[data-size='lg'] {
    width: var(--emerald-control-avatar-lg, 48px);
    height: var(--emerald-control-avatar-lg, 48px);
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: var(--emerald-text-b1-weight, 400);
}
.emerald-avatar__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.emerald-avatar__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    line-height: 1;
}

.emerald-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--emerald-text-b3-height, 18px);
    min-height: var(--emerald-text-b3-height, 18px);
    padding: 0 var(--emerald-spacing-2xs, 4px);
    border-radius: var(--emerald-radius-full, 999px);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: var(--emerald-text-b3-bold-weight, 600);
    line-height: var(--emerald-text-b3-height, 18px);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.emerald-badge[data-dot] {
    min-width: 8px;
    min-height: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
}
.emerald-badge[data-variant='neutral'] {
    background: var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-neutral-900, #494a4c);
}
.emerald-badge[data-variant='primary'] {
    background: var(--emerald-primary-600, #1fae60);
    color: var(--emerald-on-primary, #fefefe);
}
.emerald-badge[data-variant='success'] {
    background: var(--emerald-status-success-bg, #e7fff2);
    color: var(--emerald-status-success-br, #1fae60);
}
.emerald-badge[data-variant='danger'] {
    background: var(--emerald-status-danger-bg, #ffebee);
    color: var(--emerald-status-danger-br, #c61424);
}
.emerald-badge[data-variant='info'] {
    background: var(--emerald-status-info-bg, #e4f2ff);
    color: var(--emerald-status-info-br, #3a70e2);
}
.emerald-badge[data-variant='warning'] {
    background: var(--emerald-status-warning-bg, #fff7e1);
    color: var(--emerald-neutral-1000, #2b2d2e);
}
.emerald-badge[data-dot][data-variant='neutral'] {
    background: var(--emerald-neutral-400, #aeb6be);
}
.emerald-badge[data-dot][data-variant='primary'] {
    background: var(--emerald-primary-600, #1fae60);
}
.emerald-badge[data-dot][data-variant='success'] {
    background: var(--emerald-status-success-br, #1fae60);
}
.emerald-badge[data-dot][data-variant='danger'] {
    background: var(--emerald-status-danger-br, #c61424);
}
.emerald-badge[data-dot][data-variant='info'] {
    background: var(--emerald-status-info-br, #3a70e2);
}
.emerald-badge[data-dot][data-variant='warning'] {
    background: var(--emerald-status-warning-br, #ffcf06);
}

.emerald-breadcrumbs {
    display: block;
    width: 100%;
    min-width: 0;
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: var(--emerald-text-b2-weight, 400);
    line-height: var(--emerald-text-b2-height, 21px);
    color: var(--emerald-on-surface, #2b2d2e);
}

.emerald-breadcrumbs__divider {
    display: inline-flex;
    align-items: center;
    color: var(--emerald-neutral-400, #aeb6be);
    user-select: none;
}

.emerald-breadcrumbs__ellipsis {
    display: inline-flex;
    align-items: center;
    color: var(--emerald-neutral-400, #aeb6be);
    user-select: none;
}

.emerald-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.emerald-breadcrumbs__link {
    color: var(--emerald-primary-600, #1fae60);
    text-decoration: none;
    transition: color var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-breadcrumbs__link:hover {
    color: var(--emerald-primary-700, #027d4c);
    text-decoration: underline;
}
.emerald-breadcrumbs__link:focus-visible {
    outline: none;
    border-radius: var(--emerald-radius-xs, 4px);
    box-shadow: var(--emerald-shadow-focus, 0 0 0 5px rgba(38, 194, 109, 0.2));
}

.emerald-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.emerald-breadcrumbs__page {
    font-weight: var(--emerald-text-b2-bold-weight, 600);
    color: var(--emerald-neutral-900, #494a4c);
}

.emerald-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--emerald-spacing-xs, 8px);
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    border: var(--emerald-stroke-s, 1px) solid transparent;
    border-radius: var(--emerald-radius-m, 8px);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
      background-color var(--emerald-motion-duration-fast, 120ms) ease,
      border-color var(--emerald-motion-duration-fast, 120ms) ease,
      color var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-button[data-size='sm'] {
    padding: var(--emerald-spacing-2xs, 4px) var(--emerald-spacing-xs, 8px);
    font-size: var(--emerald-text-b3-size, 12px);
    line-height: var(--emerald-text-b3-height, 18px);
    font-weight: var(--emerald-text-b3-bold-weight, 600);
}
.emerald-button[data-size='md'] {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    font-size: var(--emerald-text-b2-size, 14px);
    line-height: var(--emerald-text-b2-height, 21px);
    font-weight: var(--emerald-text-b2-bold-weight, 600);
}
.emerald-button[data-size='lg'] {
    padding: var(--emerald-spacing-s, 12px) var(--emerald-spacing-m, 16px);
    font-size: var(--emerald-text-b1-size, 16px);
    line-height: var(--emerald-text-b1-height, 24px);
    font-weight: var(--emerald-text-b1-bold-weight, 700);
}
.emerald-button[data-variant='primary'] {
    background: var(--emerald-primary-600, #1fae60);
    color: var(--emerald-on-primary, #fefefe);
}
.emerald-button[data-variant='primary']:hover:not([data-disabled]):not(:active) {
    background: var(--emerald-primary-700, #027d4c);
}
.emerald-button[data-variant='primary']:active:not([data-disabled]) {
    background: var(--emerald-primary-800, #01603a);
}
.emerald-button[data-variant='primary'][data-disabled] {
    background: var(--emerald-neutral-300, #ccd6e7);
    color: var(--emerald-neutral-500, #a3afbe);
}
.emerald-button[data-variant='primary']:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: 0;
}
.emerald-button[data-variant='secondary'] {
    background: transparent;
    border-color: var(--emerald-secondary-600, #00b4dc);
    color: var(--emerald-secondary-600, #00b4dc);
}
.emerald-button[data-variant='secondary']:hover:not([data-disabled]):not(:active) {
    border-color: var(--emerald-secondary-700, #00809d);
    color: var(--emerald-secondary-700, #00809d);
}
.emerald-button[data-variant='secondary']:active:not([data-disabled]) {
    border-color: var(--emerald-secondary-800, #006982);
    color: var(--emerald-secondary-800, #006982);
}
.emerald-button[data-variant='secondary'][data-disabled] {
    border-color: var(--emerald-neutral-400, #aeb6be);
    color: var(--emerald-neutral-400, #aeb6be);
}
.emerald-button[data-variant='secondary']:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-secondary-600, #00b4dc);
    outline-offset: 1px;
}
.emerald-button[data-variant='tertiary'] {
    background: transparent;
    color: var(--emerald-neutral-900, #494a4c);
}
.emerald-button[data-variant='tertiary']:hover:not([data-disabled]):not(:active) {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.emerald-button[data-variant='tertiary']:active:not([data-disabled]) {
    background: var(--emerald-neutral-300, #ccd6e7);
}
.emerald-button[data-variant='tertiary'][data-disabled] {
    color: var(--emerald-neutral-400, #aeb6be);
}
.emerald-button[data-variant='tertiary']:focus-visible {
    background: var(--emerald-neutral-200, #f6f8fa);
    box-shadow: inset 0 0 0 var(--emerald-stroke-l, 4px) var(--emerald-neutral-600, #939dac);
    outline: none;
}
.emerald-button[data-variant='destructive'] {
    background: var(--emerald-danger-400, #df3543);
    color: var(--emerald-on-danger, #fefefe);
}
.emerald-button[data-variant='destructive']:hover:not([data-disabled]):not(:active) {
    background: var(--emerald-danger-500, #c61424);
}
.emerald-button[data-variant='destructive']:active:not([data-disabled]) {
    background: var(--emerald-danger-600, #a1000e);
}
.emerald-button[data-variant='destructive'][data-disabled] {
    background: var(--emerald-neutral-300, #ccd6e7);
    color: var(--emerald-neutral-500, #a3afbe);
}
.emerald-button[data-variant='destructive']:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-danger-400, #df3543);
    outline-offset: 0;
}
.emerald-button[data-disabled] {
    cursor: not-allowed;
    pointer-events: none;
}
.emerald-button[data-loading] {
    cursor: progress;
}
.emerald-button__content {
    display: inline-flex;
    align-items: center;
    gap: inherit;
}
.emerald-button__loading {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.emerald-button__spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentcolor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: emerald-button-spin 0.6s linear infinite;
}
@keyframes emerald-button-spin {
to { transform: rotate(360deg);
}
}

.emerald-calendar__grid {
    display: flex;
    flex-direction: column;
}

  /* minmax(0, 1fr): plain 1fr floors at min-content, and the nowrap event chips
     would push the columns past the card and out of step with the day header. */
.emerald-calendar__weekdays,
  .emerald-calendar__week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.emerald-calendar__weekdays {
    padding: var(--emerald-spacing-xs, 8px) 0;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.emerald-calendar__weekdays span {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}
.emerald-calendar__week {
    min-height: 104px;
}
.emerald-calendar__cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    min-width: 0;
    padding: 6px;
    border: 0;
    border-right: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.emerald-calendar__cell:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.emerald-calendar__cell[data-selected] {
    background: var(--emerald-primary-100, #e7fff2);
}
.emerald-calendar__cell[data-out] {
    color: var(--emerald-on-surface-variant, #757e85);
    opacity: 0.5;
    cursor: default;
}
.emerald-calendar__cell:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: -2px;
}
.emerald-calendar__date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 22px;
    height: 22px;
    border-radius: var(--emerald-radius-s, 6px);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.emerald-calendar__date[data-today] {
    background: var(--emerald-primary-700, #027d4c);
    color: var(--emerald-on-primary, #fefefe);
}
.emerald-calendar__events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    min-width: 0;
    margin-top: 4px;
}

  /* Chips are ruled on the leading edge rather than filled end to end, and the
     time trails the title instead of leading it. */
.emerald-calendar__event {
    display: flex;
    align-items: baseline;
    gap: 4px;
    overflow: hidden;
    min-width: 0;
    padding: 1px 4px;
    border-left: 3px solid var(--emerald-neutral-600, #939dac);
    border-radius: 0 3px 3px 0;
    background: var(--emerald-neutral-200, #f6f8fa);
    font-size: 10px;
}
.emerald-calendar__event[data-tone='primary'] { border-left-color: var(--emerald-primary-600, #1fae60);
}
.emerald-calendar__event[data-tone='secondary'] { border-left-color: var(--emerald-secondary-600, #00b4dc);
}
.emerald-calendar__event[data-tone='info'] { border-left-color: var(--emerald-info-500, #3a70e2);
}
.emerald-calendar__event[data-tone='alert'] { border-left-color: var(--emerald-alert-600, #d9af00);
}
.emerald-calendar__event[data-tone='danger'] { border-left-color: var(--emerald-danger-500, #e5484d);
}
.emerald-calendar__event[data-allday] { background: var(--emerald-neutral-300, #ccd6e7);
}
.emerald-calendar__event[data-allday][data-tone='primary'] { background: var(--emerald-primary-100, #e7fff2);
}
.emerald-calendar__event[data-allday][data-tone='secondary'] { background: var(--emerald-secondary-100, #dbf8ff);
}
.emerald-calendar__event[data-allday][data-tone='info'] { background: var(--emerald-info-100, #e4f2ff);
}
.emerald-calendar__event[data-allday][data-tone='alert'] { background: var(--emerald-alert-100, #fff7e1);
}
.emerald-calendar__event[data-allday][data-tone='danger'] { background: var(--emerald-danger-100, #ffe9ea);
}
.emerald-calendar__event-title {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emerald-calendar__event-time {
    flex: none;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 9px;
}
.emerald-calendar__more {
    padding: 1px 4px;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 10px;
}
@media (max-width: 640px) {
.emerald-calendar__week {
      min-height: 76px;
}
.emerald-calendar__event {
      padding: 1px 2px;
      font-size: 9px;
}
.emerald-calendar__event-time {
      display: none;
}
}

.emerald-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--emerald-spacing-m, 16px);
    padding: var(--emerald-spacing-s, 12px) var(--emerald-spacing-m, 16px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
@media (max-width: 640px) {
.emerald-calendar__header {
      flex-wrap: wrap;
      gap: var(--emerald-spacing-xs, 8px);
}
}

.emerald-calendar__mini {
    padding: var(--emerald-spacing-m, 16px);
}
.emerald-calendar__mini-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}
.emerald-calendar__mini-weekday {
    padding: 2px 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
}
.emerald-calendar__mini-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 28px;
    border: none;
    border-radius: var(--emerald-radius-m, 8px);
    background: transparent;
    color: var(--emerald-on-surface, #2b2d2e);
    font-family: inherit;
    font-size: var(--emerald-text-b3-size, 12px);
    cursor: pointer;
}
.emerald-calendar__mini-day:disabled {
    color: var(--emerald-on-surface-variant, #757e85);
    opacity: 0.5;
    cursor: default;
}
.emerald-calendar__mini-day:hover:not(:disabled) {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.emerald-calendar__mini-day:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: 1px;
}
.emerald-calendar__mini-day[data-today] {
    font-weight: 700;
}
.emerald-calendar__mini-day[data-selected] {
    background: var(--emerald-primary-700, #027d4c);
    color: var(--emerald-on-primary, #fefefe);
}
.emerald-calendar__mini-dots {
    display: flex;
    gap: 2px;
    height: 4px;
    margin-top: 1px;
}
.emerald-calendar__mini-dot {
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-neutral-600, #939dac);
}
.emerald-calendar__mini-dot[data-tone='primary'] { background: var(--emerald-primary-600, #1fae60);
}
.emerald-calendar__mini-dot[data-tone='secondary'] { background: var(--emerald-secondary-600, #00b4dc);
}
.emerald-calendar__mini-dot[data-tone='info'] { background: var(--emerald-info-500, #3a70e2);
}
.emerald-calendar__mini-dot[data-tone='alert'] { background: var(--emerald-alert-600, #d9af00);
}
.emerald-calendar__mini-dot[data-tone='danger'] { background: var(--emerald-danger-500, #e5484d);
}

  /* On the selected day the tone dots would vanish into the fill. */
.emerald-calendar__mini-day[data-selected] .emerald-calendar__mini-dot {
    background: var(--emerald-on-primary, #fefefe);
}

  /*
   * Size and stroke both route through custom properties rather than being set
   * directly, so a host class can retune a glyph it embeds — the control sizes
   * an icon sits inside do not all land on the token scale.
   */
.emerald-icon {
    display: inline-block;
    flex-shrink: 0;
    width: var(--emerald-icon-size, var(--emerald-icon-m, 20px));
    height: var(--emerald-icon-size, var(--emerald-icon-m, 20px));
    stroke-width: var(--emerald-icon-stroke, 1.75);
    vertical-align: middle;
}

  /*
   * Wrapped in :where() to strip these to zero specificity: the `size` prop is
   * the default, and a single-class host rule outranks it without needing
   * !important or a contrived selector.
   */
:where(.emerald-icon[data-size='s']) {
    --emerald-icon-size: var(--emerald-icon-s, 18px);
}
:where(.emerald-icon[data-size='m']) {
    --emerald-icon-size: var(--emerald-icon-m, 20px);
}
:where(.emerald-icon[data-size='l']) {
    --emerald-icon-size: var(--emerald-icon-l, 24px);
}
:where(.emerald-icon[data-size='xl']) {
    --emerald-icon-size: var(--emerald-icon-xl, 32px);
}

.emerald-calendar__title {
    margin: 0;
    font-size: var(--emerald-text-h4-size, 20px);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.emerald-calendar__today {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 28px;
    padding: 0 var(--emerald-spacing-s, 12px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-m, 8px);
    background: var(--emerald-background, #fefefe);
    color: var(--emerald-on-surface, #2b2d2e);
    font-family: inherit;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: var(--emerald-text-b3-bold-weight, 600);
    cursor: pointer;
}
.emerald-calendar__today:hover:not(:disabled) {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.emerald-calendar__today:disabled {
    color: var(--emerald-neutral-400, #aeb6be);
    cursor: not-allowed;
}
.emerald-calendar__today:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: 1px;
}

.emerald-calendar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
    color: var(--emerald-on-surface, #2b2d2e);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
}
.emerald-calendar[data-disabled] {
    opacity: 0.6;
}

  /* Shared by EmCalendarPrev and EmCalendarNext — housed on the always-present
     root so either arrow paints when used on its own. */
.emerald-calendar__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-m, 8px);
    background: var(--emerald-background, #fefefe);
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.emerald-calendar__nav:hover:not(:disabled) {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.emerald-calendar__nav:disabled {
    color: var(--emerald-neutral-400, #aeb6be);
    cursor: not-allowed;
}
.emerald-calendar__nav:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: 1px;
}

.emerald-card {
    display: flex;
    flex-direction: column;
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid transparent;
    border-radius: var(--emerald-radius-m, 8px);
    overflow: clip;
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-card[data-variant='complete'] {
    padding: var(--emerald-spacing-2xl, 32px) var(--emerald-spacing-3xl, 40px);
    box-shadow: var(--emerald-shadow-l, 0 5px 12px -1px rgba(51, 51, 51, 0.2));
}
.emerald-card[data-variant='simple'] {
    padding: var(--emerald-spacing-3xs, 2px);
}
.emerald-card[data-hoverable]:hover {
    box-shadow: var(--emerald-shadow-xl, 0 16px 40px -8px rgba(51, 51, 51, 0.2));
    border-color: var(--emerald-primary-500, #6fb38c);
}
.emerald-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-2xs, 4px);
    margin-bottom: var(--emerald-spacing-s, 12px);
}
.emerald-card__title {
    margin: 0;
    font-size: var(--emerald-text-h4-size, 20px);
    line-height: var(--emerald-text-h4-height, 30px);
    font-weight: var(--emerald-text-h4-weight, 500);
}
.emerald-card__subtitle {
    margin: 0;
    font-size: var(--emerald-text-b2-size, 14px);
    line-height: var(--emerald-text-b2-height, 21px);
    color: var(--emerald-on-surface-variant, #757e85);
}
.emerald-card__body {
    flex: 1;
    font-size: var(--emerald-text-b1-size, 16px);
    line-height: var(--emerald-text-b1-height, 24px);
}
.emerald-card__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--emerald-spacing-xs, 8px);
    margin-top: var(--emerald-spacing-l, 20px);
}

.emerald-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--emerald-spacing-2xs, 4px);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    color: var(--emerald-on-background, #2b2d2e);
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: var(--emerald-text-b1-weight, 400);
    line-height: var(--emerald-text-b1-height, 24px);
    cursor: pointer;
    user-select: none;
}
.emerald-checkbox[data-disabled] {
    cursor: not-allowed;
}
.emerald-checkbox__root {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    outline: none;
    flex-shrink: 0;
    width: var(--emerald-control-checkbox-md, 20px);
    height: var(--emerald-control-checkbox-md, 20px);
}
.emerald-checkbox[data-size='sm'] .emerald-checkbox__root {
    width: var(--emerald-control-checkbox-sm, 16px);
    height: var(--emerald-control-checkbox-sm, 16px);
}
.emerald-checkbox[data-size='lg'] .emerald-checkbox__root {
    width: var(--emerald-control-checkbox-lg, 24px);
    height: var(--emerald-control-checkbox-lg, 24px);
}
.emerald-checkbox__box {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-border, #aeb6be);
    border-radius: var(--emerald-radius-xs, 4px);
    background: var(--emerald-neutral-100, #fefefe);
    box-shadow: var(--emerald-shadow-field, 0 1px 2px 0 rgba(5, 0, 18, 0.05));
    transition: background-color var(--emerald-motion-duration-fast, 120ms) ease, border-color var(--emerald-motion-duration-fast, 120ms) ease, box-shadow var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-checkbox:hover:not([data-disabled]) .emerald-checkbox__root[data-state='unchecked'] .emerald-checkbox__box {
    background: var(--emerald-neutral-200, #f6f8fa);
    border-color: var(--emerald-neutral-600, #939dac);
}
.emerald-checkbox__root[data-state='checked'] .emerald-checkbox__box,
  .emerald-checkbox__root[data-state='indeterminate'] .emerald-checkbox__box {
    background: var(--emerald-primary-600, #1fae60);
    border-color: transparent;
    box-shadow: none;
}
.emerald-checkbox:hover:not([data-disabled]) .emerald-checkbox__root[data-state='checked'] .emerald-checkbox__box,
  .emerald-checkbox:hover:not([data-disabled]) .emerald-checkbox__root[data-state='indeterminate'] .emerald-checkbox__box {
    background: var(--emerald-primary-700, #027d4c);
}
.emerald-checkbox__root:focus-visible .emerald-checkbox__box {
    outline: var(--emerald-stroke-s, 1px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: 0;
}
.emerald-checkbox__root[data-disabled] .emerald-checkbox__box {
    background: var(--emerald-neutral-200, #f6f8fa);
    border-color: var(--emerald-neutral-300, #ccd6e7);
    box-shadow: none;
}
.emerald-checkbox__root[data-disabled][data-state='checked'] .emerald-checkbox__box,
  .emerald-checkbox__root[data-disabled][data-state='indeterminate'] .emerald-checkbox__box {
    background: var(--emerald-neutral-400, #aeb6be);
    border-color: transparent;
}
.emerald-checkbox__indicator {
    position: relative;
    z-index: 1;
    display: inline-flex;
    color: var(--emerald-on-primary, #fefefe);
    line-height: 0;
}
.emerald-checkbox__root[data-disabled] .emerald-checkbox__indicator {
    color: var(--emerald-neutral-100, #fefefe);
}
.emerald-checkbox__glyph {
    /* The mark scales with the box, which follows the control geometry rather
       than the icon scale. Stroke is 2.5 against a 16-unit grid, restated for
       the icon set's 24-unit one so the mark keeps its weight. */
    --emerald-icon-size: 16px;
    --emerald-icon-stroke: 3.75;
}
.emerald-checkbox[data-size='sm'] .emerald-checkbox__glyph {
    --emerald-icon-size: 12px;
}
.emerald-checkbox[data-size='lg'] .emerald-checkbox__glyph {
    --emerald-icon-size: 18px;
}
.emerald-checkbox__label {
    color: inherit;
}
.emerald-checkbox[data-disabled] .emerald-checkbox__label {
    color: var(--emerald-neutral-400, #aeb6be);
}

.emerald-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Hit area, not glyph scale — --emerald-icon-* sizes the mark inside. */
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--emerald-radius-m, 8px);
    background: transparent;
    color: var(--emerald-neutral-700, #757e85);
    cursor: pointer;
}
.emerald-dialog__close:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-dialog__close:focus-visible {
    outline: var(--emerald-stroke-s, 1px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: 0;
}

.emerald-dialog {
    padding: 0;
    margin: auto;
    border: none;
    background: transparent;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow: visible;
}
.emerald-dialog::backdrop {
    background: var(--emerald-neutral-alpha-30, rgba(51, 51, 51, 0.3));
}
.emerald-dialog__content {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xl, 24px);
    width: fit-content;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    min-width: min(320px, 100%);
    /* Shares the card surface pad (m/l) so dialogs and cards read as one family */
    padding: var(--emerald-spacing-m, 16px) var(--emerald-spacing-l, 20px);
    background: var(--emerald-background, #fefefe);
    border-radius: var(--emerald-radius-m, 8px);
    overflow-x: clip;
    overflow-y: auto;
    box-shadow: var(--emerald-shadow-l, 0 5px 12px -1px rgba(51, 51, 51, 0.2));
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    color: var(--emerald-on-surface, #2b2d2e);
}

.emerald-dialog__description {
    margin: 0;
    font-size: var(--emerald-text-b1-size, 16px);
    line-height: var(--emerald-text-b1-height, 24px);
    font-weight: var(--emerald-text-b1-weight, 400);
    color: var(--emerald-neutral-700, #757e85);
}

.emerald-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--emerald-spacing-s, 12px) var(--emerald-spacing-xs, 8px);
}
.emerald-dialog__footer[data-variant='pagination'] {
    justify-content: center;
}
.emerald-dialog__footer[data-variant='one-button'] {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.emerald-dialog__title {
    margin: 0;
    font-size: var(--emerald-text-h3-size, 24px);
    line-height: var(--emerald-text-h3-height, 36px);
    font-weight: var(--emerald-text-h3-weight, 700);
    color: var(--emerald-on-surface, #2b2d2e);
}

.emerald-divider {
    box-sizing: border-box;
    border: 0;
    margin: 0;
    flex-shrink: 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
}
.emerald-divider[data-orientation='horizontal']:not([data-labeled]) {
    display: block;
    width: 100%;
    height: 0;
    border-top: var(--emerald-stroke-s, 1px) solid var(--emerald-divider, #ccd6e7);
}
.emerald-divider[data-orientation='vertical']:not([data-labeled]) {
    display: inline-block;
    align-self: stretch;
    width: 0;
    min-height: 1em;
    height: 100%;
    border-left: var(--emerald-stroke-s, 1px) solid var(--emerald-divider, #ccd6e7);
}
.emerald-divider[data-labeled] {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    width: 100%;
}
.emerald-divider[data-labeled][data-orientation='vertical'] {
    flex-direction: column;
    width: auto;
    height: 100%;
    min-height: 4em;
}
.emerald-divider__line {
    flex: 1 1 auto;
    min-width: var(--emerald-spacing-s, 12px);
    min-height: var(--emerald-spacing-s, 12px);
    border: 0;
    border-top: var(--emerald-stroke-s, 1px) solid var(--emerald-divider, #ccd6e7);
}
.emerald-divider[data-orientation='vertical'] .emerald-divider__line {
    border-top: 0;
    border-left: var(--emerald-stroke-s, 1px) solid var(--emerald-divider, #ccd6e7);
    width: 0;
    min-width: 0;
}
.emerald-divider__label {
    flex: 0 0 auto;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: var(--emerald-text-b3-weight, 400);
    line-height: var(--emerald-text-b3-height, 18px);
    color: var(--emerald-on-surface-variant, #757e85);
    white-space: nowrap;
}

.emerald-expansion-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--emerald-neutral-100, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-m, 8px);
    overflow: clip;
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-expansion-panel[data-selected] {
    border-color: var(--emerald-primary-500, #6fb38c);
}
.emerald-expansion-panel-group[data-disabled] .emerald-expansion-panel {
    opacity: 0.5;
}

.emerald-expansion-panel__activator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
    width: 100%;
    margin: 0;
    padding: var(--emerald-spacing-s, 12px) var(--emerald-spacing-m, 16px);
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    font-weight: var(--emerald-text-b1-weight, 500);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-expansion-panel__activator:hover:not([data-disabled]) {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.emerald-expansion-panel__activator:focus-visible {
    outline: none;
    box-shadow: inset var(--emerald-shadow-focus, 0 0 0 5px rgba(38, 194, 109, 0.2));
}
.emerald-expansion-panel__activator[data-disabled] {
    cursor: not-allowed;
}

.emerald-expansion-panel__content {
    padding: 0 var(--emerald-spacing-m, 16px) var(--emerald-spacing-m, 16px);
    font-size: var(--emerald-text-b1-size, 16px);
    line-height: var(--emerald-text-b1-height, 24px);
    color: var(--emerald-on-surface-variant, #757e85);
}
.emerald-expansion-panel__content[hidden] {
    display: none;
}

.emerald-expansion-panel__cue {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: var(--emerald-neutral-700, #757e85);
    transition: transform var(--emerald-motion-duration-base, 180ms)
      var(--emerald-motion-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.emerald-expansion-panel__cue[data-state='open'] {
    transform: rotate(180deg);
}
.emerald-expansion-panel__chevron {
    display: block;
    --emerald-icon-size: 16px;
    --emerald-icon-stroke: 2;
}

.emerald-expansion-panel-group {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xs, 8px);
    width: 100%;
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
}

.emerald-expansion-panel__header {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.emerald-kanban {
    display: flex;
    flex: 1;
    gap: var(--emerald-spacing-m, 16px);
    min-height: 0;
    overflow-x: auto;
    padding-bottom: var(--emerald-spacing-xs, 8px);
    color: var(--emerald-on-surface, #2b2d2e);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
}
.emerald-kanban[data-disabled] .emerald-kanban__card {
    cursor: default;
}
.emerald-kanban__indicator {
    position: fixed;
    z-index: 2;
    height: 2px;
    margin-top: -1px;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-primary-600, #1fae60);
    pointer-events: none;
}
.emerald-kanban__hint {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.emerald-kanban__card {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xs, 8px);
    padding: var(--emerald-spacing-s, 12px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-m, 8px);
    color: var(--emerald-on-surface, #2b2d2e);
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.emerald-kanban__card:hover {
    border-color: var(--emerald-neutral-500, #a3afbe);
}
.emerald-kanban__card[data-dragging] {
    opacity: 0.4;
}
.emerald-kanban__card:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: 2px;
}

  /* Columns sit on the page background with a tinted top rule instead of a
     filled tray. */
.emerald-kanban__column {
    display: flex;
    flex: none;
    flex-direction: column;
    width: 288px;
    min-height: 0;
    padding: var(--emerald-spacing-s, 12px) var(--emerald-spacing-xs, 8px) var(--emerald-spacing-xs, 8px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-top: 3px solid var(--emerald-neutral-600, #939dac);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.emerald-kanban__column[data-tone='primary'] { border-top-color: var(--emerald-primary-600, #1fae60);
}
.emerald-kanban__column[data-tone='secondary'] { border-top-color: var(--emerald-secondary-600, #00b4dc);
}
.emerald-kanban__column[data-tone='info'] { border-top-color: var(--emerald-info-500, #3a70e2);
}
.emerald-kanban__column[data-tone='alert'] { border-top-color: var(--emerald-alert-600, #d9af00);
}
.emerald-kanban__column[data-tone='danger'] { border-top-color: var(--emerald-danger-500, #e5484d);
}
.emerald-kanban__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 4px var(--emerald-spacing-s, 12px);
}
.emerald-kanban__title {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    margin: 0;
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: 700;
}
.emerald-kanban__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 11px;
    font-weight: 700;
}
.emerald-kanban__note {
    margin: 2px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 11px;
}
.emerald-kanban__cards {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xs, 8px);
    flex: 1;
    min-height: 80px;
    margin: 0;
    padding: 4px;
    border: 1px dashed transparent;
    border-radius: var(--emerald-radius-m, 8px);
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.emerald-kanban__cards[data-drop-over] {
    border-color: var(--emerald-primary-500, #26c26d);
    background: var(--emerald-primary-100, #e7fff2);
}
.emerald-kanban__slot {
    display: flex;
    flex-direction: column;
}

.emerald-list__row {
    min-width: 0;
}
.emerald-list__item {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    width: 100%;
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    border: none;
    border-radius: var(--emerald-radius-m, 8px);
    background: transparent;
    color: var(--emerald-on-surface, #2b2d2e);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: var(--emerald-text-b2-weight, 400);
    line-height: var(--emerald-text-b2-height, 21px);
    text-align: start;
    transition: background-color var(--emerald-motion-duration-fast, 120ms) var(--emerald-motion-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
button.emerald-list__item {
    cursor: pointer;
}
.emerald-list__item:hover:not([data-disabled]) {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.emerald-list__item[data-selected] {
    background: var(--emerald-primary-100, #e7fff2);
    color: var(--emerald-primary-800, #01603a);
}
.emerald-list__item[data-unread] .emerald-list__title {
    color: var(--emerald-on-surface, #2b2d2e);
    font-weight: 700;
}
.emerald-list__item[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.emerald-list__item:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: -2px;
}

.emerald-list__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--emerald-spacing-3xs, 2px);
    min-width: 0;
}

.emerald-list__media {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
}

.emerald-list__meta {
    flex: none;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    line-height: var(--emerald-text-b3-height, 18px);
}

.emerald-list__subtitle {
    overflow: hidden;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    line-height: var(--emerald-text-b3-height, 18px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emerald-list__title {
    overflow: hidden;
    color: inherit;
    font-size: var(--emerald-text-b2-size, 14px);
    line-height: var(--emerald-text-b2-height, 21px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emerald-list {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-2xs, 4px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
}
.emerald-list[data-disabled] {
    opacity: 0.5;
}

.emerald-pagination {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: var(--emerald-text-b2-weight, 400);
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-pagination__nav {
    display: inline-flex;
    align-items: center;
    gap: var(--emerald-spacing-2xs, 4px);
}

.emerald-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 32px;
    height: 28px;
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    background: transparent;
    border: var(--emerald-stroke-s, 1px) solid transparent;
    border-radius: var(--emerald-radius-xs, 4px);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color var(--emerald-motion-duration-fast, 120ms) ease, border-color var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-pagination__item[data-selected] {
    background: var(--emerald-primary-100, #e7fff2);
    border-color: var(--emerald-primary-600, #1fae60);
    font-weight: var(--emerald-text-b2-bold-weight, 600);
}
.emerald-pagination__item:hover:not([data-disabled]):not([data-selected]) {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.emerald-pagination__item:focus-visible {
    outline: none;
    box-shadow: var(--emerald-shadow-focus, 0 0 0 5px rgba(38, 194, 109, 0.2));
}
.emerald-pagination__item[data-disabled] {
    color: var(--emerald-neutral-400, #aeb6be);
    cursor: not-allowed;
}

.emerald-pagination__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 32px;
    height: 28px;
    padding: 0 var(--emerald-spacing-xs, 8px);
    background: transparent;
    border: var(--emerald-stroke-s, 1px) solid transparent;
    border-radius: var(--emerald-radius-xs, 4px);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-pagination__next:hover:not([data-disabled]) {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.emerald-pagination__next[data-disabled] {
    color: var(--emerald-neutral-400, #aeb6be);
    cursor: not-allowed;
}
.emerald-pagination__next:focus-visible {
    outline: none;
    box-shadow: var(--emerald-shadow-focus, 0 0 0 5px rgba(38, 194, 109, 0.2));
}

.emerald-pagination__prev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 32px;
    height: 28px;
    padding: 0 var(--emerald-spacing-xs, 8px);
    background: transparent;
    border: var(--emerald-stroke-s, 1px) solid transparent;
    border-radius: var(--emerald-radius-xs, 4px);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-pagination__prev:hover:not([data-disabled]) {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.emerald-pagination__prev[data-disabled] {
    color: var(--emerald-neutral-400, #aeb6be);
    cursor: not-allowed;
}
.emerald-pagination__prev:focus-visible {
    outline: none;
    box-shadow: var(--emerald-shadow-focus, 0 0 0 5px rgba(38, 194, 109, 0.2));
}

.emerald-popover {
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    padding: var(--emerald-spacing-xs, 8px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-alpha-gray-20, #ccd6e733);
    border-radius: var(--emerald-radius-m, 8px);
    background: var(--emerald-surface, #fff);
    box-shadow: var(--emerald-shadow-m, 0 2px 4px 0 rgba(51, 51, 51, 0.2));
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: var(--emerald-text-b1-weight, 400);
    line-height: var(--emerald-text-b1-height, 24px);
    color: var(--emerald-on-surface, #2b2d2e);
    opacity: 0;
    transform: translateY(-4px);
    transition-property: opacity, transform, overlay, display;
    transition-duration: var(--emerald-motion-duration-base, 180ms);
    transition-timing-function: var(--emerald-motion-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    transition-behavior: allow-discrete;
}
.emerald-popover:popover-open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}
@starting-style {
.emerald-popover:popover-open {
      opacity: 0;
      transform: translateY(-4px);
}
}

.emerald-progress {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--emerald-spacing-2xs, 4px);
    width: 100%;
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-progress__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--emerald-spacing-xs, 8px);
}
.emerald-progress__label {
    margin: 0;
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: var(--emerald-text-b2-bold-weight, 600);
    line-height: var(--emerald-text-b2-height, 21px);
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-progress__value {
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: var(--emerald-text-b3-weight, 400);
    line-height: var(--emerald-text-b3-height, 18px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-variant-numeric: tabular-nums;
}
.emerald-progress__track {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-neutral-200, #f6f8fa);
}
.emerald-progress[data-size='sm'] .emerald-progress__track {
    height: 4px;
}
.emerald-progress[data-size='md'] .emerald-progress__track {
    height: 8px;
}
.emerald-progress[data-size='lg'] .emerald-progress__track {
    height: 12px;
}
.emerald-progress__fill {
    display: block;
    height: 100%;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-primary-600, #1fae60);
    transition: width var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-progress__fill[data-state='indeterminate'],
  .emerald-progress[data-indeterminate] .emerald-progress__fill {
    width: 40% !important;
    transition: none;
    animation: emerald-progress-indeterminate 1.2s ease-in-out infinite;
}
@keyframes emerald-progress-indeterminate {
0% {
      transform: translateX(-100%);
}
100% {
      transform: translateX(350%);
}
}

.emerald-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--emerald-spacing-2xs, 4px);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    color: var(--emerald-on-background, #2b2d2e);
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: var(--emerald-text-b1-weight, 400);
    line-height: var(--emerald-text-b1-height, 24px);
    cursor: pointer;
    user-select: none;
}
.emerald-radio[data-disabled] {
    cursor: not-allowed;
}
.emerald-radio__root {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    outline: none;
    flex-shrink: 0;
    width: var(--emerald-control-checkbox-md, 20px);
    height: var(--emerald-control-checkbox-md, 20px);
}
.emerald-radio[data-size='sm'] .emerald-radio__root {
    width: var(--emerald-control-checkbox-sm, 16px);
    height: var(--emerald-control-checkbox-sm, 16px);
}
.emerald-radio[data-size='lg'] .emerald-radio__root {
    width: var(--emerald-control-checkbox-lg, 24px);
    height: var(--emerald-control-checkbox-lg, 24px);
}
.emerald-radio__circle {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-border, #aeb6be);
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-neutral-100, #fefefe);
    box-shadow: var(--emerald-shadow-field, 0 1px 2px 0 rgba(5, 0, 18, 0.05));
    transition:
      background-color var(--emerald-motion-duration-fast, 120ms) ease,
      border-color var(--emerald-motion-duration-fast, 120ms) ease,
      box-shadow var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-radio:hover:not([data-disabled]) .emerald-radio__root[data-state='unchecked'] .emerald-radio__circle {
    background: var(--emerald-neutral-200, #f6f8fa);
    border-color: var(--emerald-neutral-600, #939dac);
}
.emerald-radio__root[data-state='checked'] .emerald-radio__circle {
    background: var(--emerald-primary-600, #1fae60);
    border-color: transparent;
    box-shadow: none;
}
.emerald-radio:hover:not([data-disabled]) .emerald-radio__root[data-state='checked'] .emerald-radio__circle {
    background: var(--emerald-primary-700, #027d4c);
}
.emerald-radio__root:focus-visible .emerald-radio__circle {
    outline: var(--emerald-stroke-s, 1px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: 0;
}
.emerald-radio__root[data-disabled] .emerald-radio__circle {
    background: var(--emerald-neutral-200, #f6f8fa);
    border-color: var(--emerald-neutral-300, #ccd6e7);
    box-shadow: none;
}
.emerald-radio__root[data-disabled][data-state='checked'] .emerald-radio__circle {
    background: var(--emerald-neutral-400, #aeb6be);
    border-color: transparent;
}
.emerald-radio__indicator {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.emerald-radio__dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-on-primary, #fefefe);
}
.emerald-radio[data-size='sm'] .emerald-radio__dot {
    width: 6px;
    height: 6px;
}
.emerald-radio[data-size='lg'] .emerald-radio__dot {
    width: 10px;
    height: 10px;
}
.emerald-radio__root[data-disabled] .emerald-radio__dot {
    background: var(--emerald-neutral-100, #fefefe);
}
.emerald-radio__label {
    color: inherit;
}
.emerald-radio[data-disabled] .emerald-radio__label {
    color: var(--emerald-neutral-400, #aeb6be);
}

.emerald-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--emerald-spacing-xs, 8px);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    color: var(--emerald-on-background, #2b2d2e);
}
.emerald-radio-group[data-disabled] {
    cursor: not-allowed;
}

.emerald-select__activator {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--emerald-spacing-xs, 8px);
    width: 100%;
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-m, 16px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-border, #aeb6be);
    border-radius: var(--emerald-radius-m, 8px);
    background: var(--emerald-neutral-100, #fefefe);
    font-family: inherit;
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: var(--emerald-text-b1-weight, 400);
    line-height: var(--emerald-text-b1-height, 24px);
    color: var(--emerald-on-surface, #2b2d2e);
    cursor: pointer;
    transition:
      border-color var(--emerald-motion-duration-fast, 120ms) ease,
      box-shadow var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-select__activator:hover:not(:disabled):not([data-open]) {
    border-color: var(--emerald-neutral-600, #939dac);
}
.emerald-select__activator:focus-visible,
  .emerald-select__activator[data-open] {
    outline: none;
    border-color: var(--emerald-primary-600, #1fae60);
    box-shadow: var(--emerald-shadow-focus-s, 0 0 0 2px rgba(38, 194, 109, 0.2));
}
.emerald-select__activator[data-open] .emerald-select__icon {
    transform: rotate(180deg);
}
.emerald-select__icon {
    flex: none;
    /* Matches the 16px caret the showcase drew by hand; the token steps bracket
       it at 18px and 20px, both of which crowd the field's 8px padding. */
    --emerald-icon-size: 16px;
    --emerald-icon-stroke: 2;
    transition: transform var(--emerald-motion-duration-base, 180ms) var(--emerald-motion-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    color: var(--emerald-neutral-700, #757e85);
}
.emerald-select[data-disabled] .emerald-select__activator,
  .emerald-select__activator:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.emerald-select__content {
    flex-direction: column;
    align-items: stretch;
    min-width: anchor-size(width);
    padding: var(--emerald-spacing-xs, 8px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-alpha-gray-20, #ccd6e733);
    border-radius: var(--emerald-radius-m, 8px);
    background: var(--emerald-surface, #fff);
    box-shadow: var(--emerald-shadow-m, 0 2px 4px 0 rgba(51, 51, 51, 0.2));
    margin-top: var(--emerald-spacing-2xs, 4px);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: var(--emerald-text-b1-weight, 400);
    line-height: var(--emerald-text-b1-height, 24px);
    opacity: 0;
    transform: translateY(-4px);
    transition-property: opacity, transform, overlay, display;
    transition-duration: var(--emerald-motion-duration-base, 180ms);
    transition-timing-function: var(--emerald-motion-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    transition-behavior: allow-discrete;
}
.emerald-select__content:popover-open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}
@starting-style {
.emerald-select__content:popover-open {
      opacity: 0;
      transform: translateY(-4px);
}
}

.emerald-select__item {
    display: flex;
    align-items: center;
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    border-left: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: 0 var(--emerald-radius-xs, 4px) var(--emerald-radius-xs, 4px) 0;
    background: var(--emerald-neutral-100, #fefefe);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: var(--emerald-text-b1-weight, 400);
    line-height: var(--emerald-text-b1-height, 24px);
    color: var(--emerald-on-surface, #2b2d2e);
    cursor: pointer;
    user-select: none;
    transition:
      background-color var(--emerald-motion-duration-fast, 120ms) ease,
      border-color var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-select__item[data-highlighted],
  .emerald-select__item:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
    border-left-color: var(--emerald-neutral-600, #939dac);
}
.emerald-select__item[data-selected] {
    background: var(--emerald-primary-100, #e7fff2);
    border-left-color: var(--emerald-primary-600, #1fae60);
}
.emerald-select__item[data-disabled] {
    opacity: 0.5;
    pointer-events: none;
}

.emerald-select__placeholder {
    /* neutral-700, not 500: 500 reads ~2.2-2.4:1 against surface in both themes */
    color: var(--emerald-neutral-700, #5a6472);
}

.emerald-select {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--emerald-spacing-2xs, 4px);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    width: 100%;
}
.emerald-select__label {
    font-size: var(--emerald-text-b2-size, 14px);
    line-height: var(--emerald-text-b2-height, 21px);
    font-weight: var(--emerald-text-b2-bold-weight, 600);
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-select[data-disabled] .emerald-select__label {
    color: var(--emerald-neutral-400, #aeb6be);
}

.emerald-select__value {
    flex: 1;
    min-width: 0;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emerald-slider {
    position: relative;
    width: 100%;
}
.emerald-slider > [data-orientation='horizontal'] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 24px;
}
.emerald-slider[data-orientation='vertical'] {
    width: auto;
    height: 160px;
}
.emerald-slider > [data-orientation='vertical'] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.emerald-slider__track {
    position: relative;
    flex: 1 1 auto;
    height: 12px;
    width: 100%;
    overflow: hidden;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-neutral-200, #f6f8fa);
    cursor: pointer;
}
.emerald-slider[data-orientation='vertical'] .emerald-slider__track {
    width: 12px;
    height: 100%;
}
.emerald-slider[data-disabled] .emerald-slider__track,
  .emerald-slider__track[data-disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}
.emerald-slider[data-readonly] .emerald-slider__track,
  .emerald-slider__track[data-readonly] {
    cursor: default;
}
.emerald-slider__range {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-secondary-600, #00b4dc);
    box-shadow: var(--emerald-shadow-field, 0 1px 2px 0 rgba(5, 0, 18, 0.05));
}
.emerald-slider[data-orientation='vertical'] .emerald-slider__range {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
}
.emerald-slider__thumb {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-neutral-100, #fefefe);
    box-shadow: var(--emerald-shadow-thumb, 0 1px 3px 0 rgba(5, 0, 18, 0.12));
    cursor: grab;
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 1;
}
.emerald-slider[data-orientation='vertical'] .emerald-slider__thumb {
    top: auto;
    left: 50%;
    transform: translate(-50%, 50%);
}
.emerald-slider__thumb:focus-visible {
    outline: none;
    box-shadow:
      var(--emerald-shadow-thumb, 0 1px 3px 0 rgba(5, 0, 18, 0.12)),
      var(--emerald-shadow-focus, 0 0 0 5px rgba(38, 194, 109, 0.2));
}
.emerald-slider__thumb[data-state='dragging'] {
    cursor: grabbing;
}
.emerald-slider__thumb[data-disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}
.emerald-slider[data-readonly] .emerald-slider__thumb,
  .emerald-slider__thumb[data-readonly] {
    cursor: default;
}

.emerald-snackbar__close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    /* Hit area, not glyph scale — --emerald-icon-* sizes the mark inside. */
    width: 24px;
    height: 24px;
    margin: calc(var(--emerald-spacing-3xs, 2px) * -1) calc(var(--emerald-spacing-3xs, 2px) * -1) 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--emerald-radius-s, 6px);
    background: transparent;
    color: var(--emerald-neutral-700, #757e85);
    cursor: pointer;
}
.emerald-snackbar__close:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-snackbar__close:focus-visible {
    outline: var(--emerald-stroke-s, 1px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: 0;
}

.emerald-snackbar__content {
    flex: 1;
    min-width: 0;
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: var(--emerald-text-b2-weight, 400);
    line-height: var(--emerald-text-b2-height, 21px);
    color: var(--emerald-on-surface, #2b2d2e);
}

.emerald-snackbar-portal {
    position: fixed;
    right: var(--emerald-spacing-m, 16px);
    bottom: var(--emerald-spacing-m, 16px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--emerald-spacing-xs, 8px);
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}
.emerald-snackbar-portal > * {
    pointer-events: auto;
}

.emerald-snackbar-queue {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--emerald-spacing-xs, 8px);
    width: 100%;
}

.emerald-snackbar {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--emerald-spacing-xs, 8px);
    width: 100%;
    padding: var(--emerald-spacing-s, 12px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-snackbar-accent, transparent);
    border-radius: var(--emerald-radius-m, 8px);
    background: var(--emerald-surface, #fff);
    box-shadow: var(--emerald-shadow-l, 0 5px 12px -1px rgba(51, 51, 51, 0.2));
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b2-size, 14px);
    line-height: var(--emerald-text-b2-height, 21px);
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-snackbar[data-variant='error'] {
    --emerald-snackbar-accent: var(--emerald-status-danger-br, #c61424);
    background: var(--emerald-status-danger-bg, #ffebee);
}
.emerald-snackbar[data-variant='success'] {
    --emerald-snackbar-accent: var(--emerald-status-success-br, #1fae60);
    background: var(--emerald-status-success-bg, #e7fff2);
}
.emerald-snackbar[data-variant='info'] {
    --emerald-snackbar-accent: var(--emerald-status-info-br, #3a70e2);
    background: var(--emerald-status-info-bg, #e4f2ff);
}
.emerald-snackbar[data-variant='warning'] {
    --emerald-snackbar-accent: var(--emerald-status-warning-br, #ffcf06);
    background: var(--emerald-status-warning-bg, #fff7e1);
}
.emerald-snackbar[data-variant='neutral'] {
    --emerald-snackbar-accent: var(--emerald-neutral-400, #aeb6be);
    background: var(--emerald-neutral-200, #f6f8fa);
}

.emerald-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--emerald-primary-600, #1fae60);
    vertical-align: middle;
}
.emerald-spinner__ring {
    display: block;
    box-sizing: border-box;
    border-style: solid;
    border-color: currentcolor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: emerald-spinner-spin 0.6s linear infinite;
}
.emerald-spinner[data-size='sm'] .emerald-spinner__ring {
    width: 14px;
    height: 14px;
    border-width: 2px;
}
.emerald-spinner[data-size='md'] .emerald-spinner__ring {
    width: 20px;
    height: 20px;
    border-width: 2px;
}
.emerald-spinner[data-size='lg'] .emerald-spinner__ring {
    width: 28px;
    height: 28px;
    border-width: 3px;
}

  /* Visually hide label text; keep for screen readers */
.emerald-spinner__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@keyframes emerald-spinner-spin {
to {
      transform: rotate(360deg);
}
}

.emerald-step {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--emerald-spacing-m, 16px);
    width: 100%;
    counter-reset: emerald-step;
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b2-size, 14px);
    line-height: var(--emerald-text-b2-height, 21px);
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-step[data-disabled] {
    opacity: 0.5;
}

.emerald-step__item {
    display: inline-flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--emerald-neutral-700, #757e85);
    font: inherit;
    text-align: start;
    cursor: pointer;
    counter-increment: emerald-step;
}
.emerald-step__marker {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-neutral-800, #636a70);
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: var(--emerald-text-b2-bold-weight, 600);
    line-height: 1;
    transition:
      background-color var(--emerald-motion-duration-fast, 120ms) ease,
      border-color var(--emerald-motion-duration-fast, 120ms) ease,
      color var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-step__marker::before {
    content: counter(emerald-step);
}
.emerald-step__label {
    font-weight: var(--emerald-text-b2-weight, 400);
}
.emerald-step__item[data-selected] {
    color: var(--emerald-primary-700, #027d4c);
}
.emerald-step__item[data-selected] .emerald-step__marker {
    background: var(--emerald-primary-600, #1fae60);
    border-color: var(--emerald-primary-600, #1fae60);
    color: var(--emerald-neutral-100, #fefefe);
}
.emerald-step__item[data-selected] .emerald-step__label {
    font-weight: var(--emerald-text-b2-bold-weight, 600);
}
.emerald-step__item:hover:not([data-disabled]):not([data-selected]) .emerald-step__marker {
    border-color: var(--emerald-primary-500, #6fb38c);
    background: var(--emerald-primary-100, #e7fff2);
}
.emerald-step__item:focus-visible {
    outline: none;
}
.emerald-step__item:focus-visible .emerald-step__marker {
    box-shadow: var(--emerald-shadow-focus, 0 0 0 5px rgba(38, 194, 109, 0.2));
}
.emerald-step__item[data-disabled] {
    color: var(--emerald-neutral-400, #aeb6be);
    cursor: not-allowed;
}
.emerald-step__item[data-disabled] .emerald-step__marker {
    background: var(--emerald-neutral-200, #f6f8fa);
    border-color: var(--emerald-neutral-300, #ccd6e7);
    color: var(--emerald-neutral-400, #aeb6be);
}

.emerald-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    color: var(--emerald-on-background, #2b2d2e);
    cursor: pointer;
    user-select: none;
}
.emerald-switch[data-disabled] {
    cursor: not-allowed;
}
.emerald-switch__root {
    display: inline-flex;
    align-items: center;
    position: relative;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    outline: none;
    flex-shrink: 0;
    font: inherit;
    color: inherit;
    cursor: inherit;
}
.emerald-switch__label {
    font-size: var(--emerald-text-b1-size, 16px);
    line-height: var(--emerald-text-b1-height, 24px);
    font-weight: var(--emerald-text-b1-bold-weight, 700);
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-switch__root:focus-visible::after {
    content: '';
    position: absolute;
    inset: -1px -2px;
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-primary-600, #1fae60);
    border-radius: var(--emerald-radius-full, 999px);
    pointer-events: none;
}
.emerald-switch__track {
    display: inline-flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    width: var(--emerald-control-switch-track-width-md, 36px);
    height: var(--emerald-control-switch-track-height-md, 20px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-400, #aeb6be);
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-neutral-200, #f6f8fa);
    box-shadow: var(--emerald-shadow-field, 0 1px 2px 0 rgba(5, 0, 18, 0.05));
    transition: background-color var(--emerald-motion-duration-fast, 120ms) ease, border-color var(--emerald-motion-duration-fast, 120ms) ease, box-shadow var(--emerald-motion-duration-fast, 120ms) ease;
    overflow: visible;
}
.emerald-switch[data-size='sm'] .emerald-switch__track {
    width: var(--emerald-control-switch-track-width-sm, 28px);
    height: var(--emerald-control-switch-track-height-sm, 16px);
}
.emerald-switch[data-size='lg'] .emerald-switch__track {
    width: var(--emerald-control-switch-track-width-lg, 44px);
    height: var(--emerald-control-switch-track-height-lg, 24px);
}
.emerald-switch__track[data-state='checked'] {
    background: var(--emerald-primary-600, #1fae60);
    border-color: var(--emerald-primary-600, #1fae60);
    box-shadow: none;
}
.emerald-switch:not([data-disabled]):hover .emerald-switch__track[data-state='unchecked'] {
    background: var(--emerald-neutral-400, #aeb6be);
    border-color: var(--emerald-neutral-600, #939dac);
}
.emerald-switch:not([data-disabled]):hover .emerald-switch__track[data-state='checked'] {
    background: var(--emerald-primary-700, #027d4c);
    border-color: var(--emerald-primary-700, #027d4c);
}
.emerald-switch[data-disabled] .emerald-switch__track[data-state='unchecked'] {
    opacity: 0.8;
}
.emerald-switch[data-disabled] .emerald-switch__track[data-state='checked'] {
    background: var(--emerald-neutral-400, #aeb6be);
    border-color: var(--emerald-neutral-600, #939dac);
    opacity: 0.5;
}
.emerald-switch__thumb {
    --travel: var(--emerald-control-switch-travel-md, 8px);
    --sign: -1;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--emerald-control-switch-thumb-md, 16px);
    height: var(--emerald-control-switch-thumb-md, 16px);
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-neutral-100, #fefefe);
    transform: translate(calc(-50% + var(--sign) * var(--travel)), -50%);
    transition: transform var(--emerald-motion-duration-fast, 120ms) ease;
    pointer-events: none;
    box-shadow: var(--emerald-shadow-thumb, 0 1px 3px 0 rgba(5, 0, 18, 0.12));
}
.emerald-switch__thumb[data-state='checked'] {
    --sign: 1;
}

  /* Track forces dir=ltr in v0 — do not reverse travel under [dir=rtl]. */
.emerald-switch[data-size='sm'] .emerald-switch__thumb {
    --travel: var(--emerald-control-switch-travel-sm, 6px);
    width: var(--emerald-control-switch-thumb-sm, 12px);
    height: var(--emerald-control-switch-thumb-sm, 12px);
}
.emerald-switch[data-size='lg'] .emerald-switch__thumb {
    --travel: var(--emerald-control-switch-travel-lg, 10px);
    width: var(--emerald-control-switch-thumb-lg, 20px);
    height: var(--emerald-control-switch-thumb-lg, 20px);
}
.emerald-switch[data-disabled] .emerald-switch__label {
    color: var(--emerald-neutral-400, #aeb6be);
}

.emerald-tabs {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.emerald-tabs__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--emerald-spacing-2xs, 4px);
    padding:
      calc(var(--emerald-spacing-xs, 8px) - var(--emerald-stroke-s, 1px))
      calc(var(--emerald-spacing-s, 12px) - var(--emerald-stroke-s, 1px));
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: var(--emerald-text-b2-weight, 400);
    line-height: var(--emerald-text-b2-height, 21px);
    color: var(--emerald-on-surface, #2b2d2e);
    background: var(--emerald-neutral-200, #f6f8fa);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    transition:
      background-color var(--emerald-motion-duration-slow, 220ms) var(--emerald-motion-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      border-color var(--emerald-motion-duration-slow, 220ms) var(--emerald-motion-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      color var(--emerald-motion-duration-slow, 220ms) var(--emerald-motion-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.emerald-tabs[data-orientation='horizontal'] .emerald-tabs__item + .emerald-tabs__item,
  .emerald-tabs:not([data-orientation]) .emerald-tabs__item + .emerald-tabs__item {
    margin-inline-start: calc(-1 * var(--emerald-stroke-s, 1px));
}
.emerald-tabs[data-orientation='vertical'] .emerald-tabs__item + .emerald-tabs__item {
    margin-block-start: calc(-1 * var(--emerald-stroke-s, 1px));
}
.emerald-tabs[data-orientation='horizontal'] .emerald-tabs__item:first-child,
  .emerald-tabs:not([data-orientation]) .emerald-tabs__item:first-child {
    border-start-start-radius: var(--emerald-radius-s, 6px);
    border-end-start-radius: var(--emerald-radius-s, 6px);
}
.emerald-tabs[data-orientation='horizontal'] .emerald-tabs__item:last-child,
  .emerald-tabs:not([data-orientation]) .emerald-tabs__item:last-child {
    border-start-end-radius: var(--emerald-radius-s, 6px);
    border-end-end-radius: var(--emerald-radius-s, 6px);
}
.emerald-tabs[data-orientation='vertical'] .emerald-tabs__item:first-child {
    border-start-start-radius: var(--emerald-radius-s, 6px);
    border-start-end-radius: var(--emerald-radius-s, 6px);
}
.emerald-tabs[data-orientation='vertical'] .emerald-tabs__item:last-child {
    border-end-start-radius: var(--emerald-radius-s, 6px);
    border-end-end-radius: var(--emerald-radius-s, 6px);
}
.emerald-tabs__item:hover:not([data-disabled]):not([data-selected]) {
    background: var(--emerald-primary-400, #94caab);
    border-color: var(--emerald-primary-500, #6fb38c);
    z-index: 1;
}
.emerald-tabs__item[data-selected] {
    background: var(--emerald-primary-200, #d6f3e2);
    border-color: var(--emerald-primary-500, #6fb38c);
    z-index: 2;
}
.emerald-tabs__item[data-disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}
.emerald-tabs__item:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: 0;
    z-index: 3;
}

.emerald-tabs__list {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    min-width: 0;
    /* Keep tab labels on one line; scroll instead of overflowing the viewport */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.emerald-tabs__list[aria-orientation='vertical'] {
    flex-direction: column;
    width: fit-content;
    max-width: none;
    overflow-x: visible;
}

.emerald-tabs[data-orientation='horizontal'] .emerald-tabs__panel,
  .emerald-tabs:not([data-orientation]) .emerald-tabs__panel {
    margin-block-start: var(--emerald-spacing-m, 16px);
}
.emerald-tabs[data-orientation='vertical'] .emerald-tabs__panel {
    margin-inline-start: var(--emerald-spacing-m, 16px);
    margin-block-start: 0;
}
.emerald-tabs__panel {
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b1-size, 16px);
    line-height: var(--emerald-text-b1-height, 24px);
    color: var(--emerald-on-surface, #2b2d2e);
}

.emerald-tag {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--emerald-spacing-3xs, 2px);
    min-height: var(--emerald-text-b3-height, 18px);
    padding: 1px var(--emerald-spacing-2xs, 4px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-border, #aeb6be);
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-background, #fefefe);
    color: var(--emerald-on-surface, #2b2d2e);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: var(--emerald-text-b3-weight, 400);
    line-height: var(--emerald-text-b3-height, 18px);
    white-space: nowrap;
}
button.emerald-tag {
    cursor: pointer;
    user-select: none;
}
button.emerald-tag:focus-visible {
    outline: none;
    box-shadow: var(--emerald-shadow-focus, 0 0 0 5px rgba(38, 194, 109, 0.2));
}
.emerald-tag:hover:not([data-disabled]) {
    box-shadow: var(--emerald-shadow-m, 0 2px 4px 0 rgba(51, 51, 51, 0.2));
}
.emerald-tag[data-variant='neutral'][data-selected] {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.emerald-tag[data-variant='success'] {
    border-color: var(--emerald-success-200, #97d4b4);
}
.emerald-tag[data-variant='success'][data-selected] {
    background: var(--emerald-primary-100, #e7fff2);
    border-color: var(--emerald-primary-300, #baedd0);
}
.emerald-tag[data-variant='danger'] {
    border-color: var(--emerald-danger-200, #ffccd2);
}
.emerald-tag[data-variant='danger'][data-selected] {
    background: var(--emerald-danger-100, #ffebee);
}
.emerald-tag[data-variant='info'] {
    border-color: var(--emerald-info-300, #93c8ff);
}
.emerald-tag[data-variant='info'][data-selected] {
    background: var(--emerald-info-100, #e4f2ff);
}
.emerald-tag[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.emerald-text-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--emerald-spacing-2xs, 4px);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    width: 100%;
}
.emerald-text-field__label {
    font-size: var(--emerald-text-b2-size, 14px);
    line-height: var(--emerald-text-b2-height, 21px);
    font-weight: var(--emerald-text-b2-bold-weight, 600);
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-text-field[data-disabled] .emerald-text-field__label {
    color: var(--emerald-neutral-400, #aeb6be);
}
.emerald-text-field__control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-m, 16px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-border, #aeb6be);
    border-radius: var(--emerald-radius-m, 8px);
    background: var(--emerald-background, #fefefe);
    font-family: inherit;
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: var(--emerald-text-b1-weight, 400);
    line-height: var(--emerald-text-b1-height, 24px);
    color: var(--emerald-neutral-1000, #2b2d2e);
    outline: none;
    transition:
      border-color var(--emerald-motion-duration-fast, 120ms) ease,
      box-shadow var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-text-field__control::placeholder {
    color: var(--emerald-neutral-500, #a3afbe);
    opacity: 1;
}
.emerald-text-field__control:hover:not([data-disabled]):not([data-readonly]):not([data-focused]) {
    border-color: var(--emerald-neutral-600, #939dac);
}
.emerald-text-field__control:focus-visible,
  .emerald-text-field__control[data-focused] {
    border-color: var(--emerald-primary-600, #1fae60);
    box-shadow: var(--emerald-shadow-focus, 0 0 0 5px rgba(38, 194, 109, 0.2));
}
.emerald-text-field__control[data-disabled] {
    background: var(--emerald-neutral-200, #f6f8fa);
    border-color: var(--emerald-neutral-300, #ccd6e7);
    color: var(--emerald-neutral-400, #aeb6be);
    cursor: not-allowed;
}
.emerald-text-field__control[data-readonly]:not([data-disabled]) {
    background: var(--emerald-neutral-100, #fefefe);
    color: var(--emerald-neutral-800, #636a70);
    cursor: default;
}
.emerald-text-field__control[data-state='invalid']:not([data-disabled]),
  .emerald-text-field__control[data-state='invalid']:focus-visible,
  .emerald-text-field__control[data-state='invalid'][data-focused] {
    border-color: var(--emerald-danger-500, #c61424);
    box-shadow: var(--emerald-shadow-danger, 0 0 0 5px rgba(251, 55, 72, 0.2));
}
.emerald-text-field__description {
    font-size: var(--emerald-text-b3-size, 12px);
    line-height: var(--emerald-text-b3-height, 18px);
    color: var(--emerald-neutral-700, #757e85);
}
.emerald-text-field__error {
    font-size: var(--emerald-text-b3-size, 12px);
    line-height: var(--emerald-text-b3-height, 18px);
    color: var(--emerald-danger-600, #a1000e);
}
.emerald-text-field__error[data-state='hidden'] {
    display: none;
}

.emerald-textarea {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--emerald-spacing-2xs, 4px);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    width: 100%;
}
.emerald-textarea__label {
    font-size: var(--emerald-text-b2-size, 14px);
    line-height: var(--emerald-text-b2-height, 21px);
    font-weight: var(--emerald-text-b2-bold-weight, 600);
    color: var(--emerald-on-surface, #2b2d2e);
}
.emerald-textarea[data-disabled] .emerald-textarea__label {
    color: var(--emerald-neutral-400, #aeb6be);
}
.emerald-textarea__control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-m, 16px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-border, #aeb6be);
    border-radius: var(--emerald-radius-m, 8px);
    background: var(--emerald-background, #fefefe);
    font-family: inherit;
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: var(--emerald-text-b1-weight, 400);
    line-height: var(--emerald-text-b1-height, 24px);
    color: var(--emerald-neutral-1000, #2b2d2e);
    outline: none;
    resize: vertical;
    min-height: calc(
      var(--emerald-textarea-rows, 3) * var(--emerald-text-b1-height, 24px)
      + 2 * var(--emerald-spacing-xs, 8px)
    );
    transition:
      border-color var(--emerald-motion-duration-fast, 120ms) ease,
      box-shadow var(--emerald-motion-duration-fast, 120ms) ease;
}
.emerald-textarea__control::placeholder {
    color: var(--emerald-neutral-500, #a3afbe);
    opacity: 1;
}
.emerald-textarea__control:hover:not([data-disabled]):not([data-readonly]):not([data-focused]) {
    border-color: var(--emerald-neutral-600, #939dac);
}
.emerald-textarea__control:focus-visible,
  .emerald-textarea__control[data-focused] {
    border-color: var(--emerald-primary-600, #1fae60);
    box-shadow: var(--emerald-shadow-focus, 0 0 0 5px rgba(38, 194, 109, 0.2));
}
.emerald-textarea__control[data-disabled] {
    background: var(--emerald-neutral-200, #f6f8fa);
    border-color: var(--emerald-neutral-300, #ccd6e7);
    color: var(--emerald-neutral-400, #aeb6be);
    cursor: not-allowed;
    resize: none;
}
.emerald-textarea__control[data-readonly]:not([data-disabled]) {
    background: var(--emerald-neutral-100, #fefefe);
    color: var(--emerald-neutral-800, #636a70);
    cursor: default;
}
.emerald-textarea__control[data-state='invalid']:not([data-disabled]),
  .emerald-textarea__control[data-state='invalid']:focus-visible,
  .emerald-textarea__control[data-state='invalid'][data-focused] {
    border-color: var(--emerald-danger-500, #c61424);
    box-shadow: var(--emerald-shadow-danger, 0 0 0 5px rgba(251, 55, 72, 0.2));
}
.emerald-textarea__description {
    font-size: var(--emerald-text-b3-size, 12px);
    line-height: var(--emerald-text-b3-height, 18px);
    color: var(--emerald-neutral-700, #757e85);
}
.emerald-textarea__error {
    font-size: var(--emerald-text-b3-size, 12px);
    line-height: var(--emerald-text-b3-height, 18px);
    color: var(--emerald-danger-600, #a1000e);
}
.emerald-textarea__error[data-state='hidden'] {
    display: none;
}

.emerald-tooltip__content {
    box-sizing: border-box;
    max-width: 240px;
    padding: var(--emerald-spacing-2xs, 4px) var(--emerald-spacing-xs, 8px);
    border: 0;
    border-radius: var(--emerald-radius-s, 6px);
    background: var(--emerald-neutral-1000, #2b2d2e);
    color: var(--emerald-neutral-100, #fefefe);
    box-shadow: var(--emerald-shadow-m, 0 2px 4px 0 rgba(51, 51, 51, 0.2));
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: var(--emerald-text-b3-weight, 400);
    line-height: var(--emerald-text-b3-height, 18px);
    margin: var(--emerald-spacing-2xs, 4px) 0;
}

.ea {
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--emerald-neutral-200, #f6f8fa);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    color: var(--emerald-on-surface, #2b2d2e);
}
.ea-doc {
    max-width: 52rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--emerald-background, #fefefe);
    border-radius: 12px;
    border: 1px solid var(--emerald-neutral-300, #ccd6e7);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.ea-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 1.5rem;
}
.ea-logo {
    width: 64px;
    height: 64px;
    background: url('/demo/emerald/emerald/logo.png') center / contain no-repeat;
}
.ea-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.ea section {
    margin-bottom: 1.5rem;
}
.ea h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 700;
}
.ea p,
  .ea li {
    margin: 0 0 8px;
    line-height: 1.55;
    color: var(--emerald-on-surface-variant, #494a4c);
}
.ea ul {
    margin: 0;
    padding-left: 1.25rem;
}
.ea code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: var(--emerald-neutral-200, #f6f8fa);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}
.ea-foot {
    margin-top: 2rem !important;
    font-size: 14px;
}
.ea-foot a {
    color: var(--emerald-primary-700, #027d4c);
    font-weight: 600;
    text-decoration: none;
}
.ea-foot a:hover {
    text-decoration: underline;
}

.ed-customizer {
    width: min(272px, calc(100vw - 24px));
    gap: var(--emerald-spacing-s, 12px);
    padding: var(--emerald-spacing-s, 12px);
    background: var(--emerald-background, #fefefe);
    color: var(--emerald-on-background, #2b2d2e);
}
.ed-customizer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--emerald-spacing-xs, 8px);
}
.ed-customizer__title {
    font-size: var(--emerald-text-b2-bold-size, 14px);
    font-weight: var(--emerald-text-b2-bold-weight, 600);
    line-height: var(--emerald-text-b2-bold-height, 21px);
}
.ed-customizer__section {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-2xs, 4px);
}
.ed-customizer__label {
    font-size: var(--emerald-text-b4-size, 10px);
    font-weight: var(--emerald-text-b4-weight, 600);
    line-height: var(--emerald-text-b4-height, 18px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--emerald-on-surface-variant, #757e85);
}

  /* EmRadioGroup stacks by default; every group in the panel is a row. */
.ed-customizer__options {
    flex-direction: row;
    align-items: stretch;
    gap: var(--emerald-spacing-2xs, 4px);
}
.ed-customizer__option {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--emerald-spacing-3xs, 2px);
    min-width: 0;
    padding: var(--emerald-spacing-2xs, 4px) var(--emerald-spacing-xs, 8px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-divider, #ccd6e7);
    border-radius: var(--emerald-radius-s, 6px);
    font-size: var(--emerald-text-b3-size, 12px);
    line-height: var(--emerald-text-b3-height, 18px);
    cursor: pointer;
    transition:
      border-color var(--emerald-motion-duration-fast, 120ms) var(--emerald-motion-ease-standard, ease),
      background var(--emerald-motion-duration-fast, 120ms) var(--emerald-motion-ease-standard, ease);
}
.ed-customizer__option[data-selected] {
    border-color: var(--emerald-primary, #26c26d);
    background: var(--emerald-primary-alpha-10, #26c26d1a);
}
.ed-customizer__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--emerald-spacing-xs, 8px);
    padding-block: var(--emerald-spacing-3xs, 2px);
}
.ed-customizer__swatch {
    display: inline-flex;
    width: 28px;
    height: 28px;
    padding: 2px;
    border: var(--emerald-stroke-m, 2px) solid transparent;
    border-radius: var(--emerald-radius-full, 999px);
    background: none;
    cursor: pointer;
}
.ed-customizer__swatch::before {
    content: '';
    flex: 1;
    border-radius: inherit;
    background: var(--ed-swatch, var(--emerald-neutral-400, #aeb6be));
}
.ed-customizer__swatch[data-state='checked'] {
    border-color: var(--emerald-on-background, #2b2d2e);
}
.ed-customizer__swatch:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-primary, #26c26d);
    outline-offset: 2px;
}
.ed-customizer__swatch[data-hue='secondary'] {
    --ed-swatch: var(--emerald-secondary, #00809d);
}
.ed-customizer__swatch[data-hue='info'] {
    --ed-swatch: var(--emerald-info, #3a70e2);
}
.ed-customizer__swatch[data-hue='danger'] {
    --ed-swatch: var(--emerald-danger, #fb3748);
}
.ed-customizer__swatch[data-hue='alert'] {
    --ed-swatch: var(--emerald-alert, #ffdb43);
}

  /* The Emerald chip cannot read `--emerald-primary`: that is the token this
     picker rewrites, so the chip would preview whatever is currently selected
     instead of the brand it offers. Both brand DEFAULTs are restated by theme. */
.ed[data-theme='emerald'] .ed-customizer__swatch[data-hue='primary'] {
    --ed-swatch: #26c26d;
}
.ed[data-theme='emerald-dark'] .ed-customizer__swatch[data-hue='primary'] {
    --ed-swatch: #2ecc77;
}

.ed {
    --ed-bg: var(--emerald-neutral-200, #f6f8fa);
    --ed-surface: var(--emerald-background, #fefefe);
    --ed-text: var(--emerald-on-surface, #2b2d2e);
    --ed-muted: var(--emerald-on-surface-variant, #757e85);
    --ed-border: var(--emerald-neutral-300, #ccd6e7);
    --ed-nav: var(--emerald-background, #fefefe);
    --ed-active: var(--emerald-primary-100, #e7fff2);
    --ed-active-text: var(--emerald-primary-800, #01603a);
    --ed-delta-up-bg: var(--emerald-primary-100, #e7fff2);
    --ed-delta-up: var(--emerald-primary-700, #027d4c);
    --ed-delta-down-bg: var(--emerald-danger-100, #ffebee);
    --ed-delta-down: var(--emerald-danger-500, #c61424);
    --ed-nav-w: 180px;
    --ed-rail-size: 40px;
    --ed-topbar-h: 56px;
    --ed-tip: var(--emerald-neutral-1000, #2b2d2e);
    --ed-motion: var(--emerald-motion-duration-base, 180ms);
    --ed-ease: var(--emerald-motion-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));

    box-sizing: border-box;
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 100%;
    min-width: 0;
    padding-left: var(--ed-nav-w);
    overflow-x: clip;
    background: var(--ed-bg);
    color: var(--ed-text);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    transition: padding-left var(--ed-motion) var(--ed-ease);
}
.ed[data-collapsed] {
    --ed-nav-w: 72px;
}
.ed[data-mode='dark'] {
    --ed-bg: #14161a;
    --ed-surface: #1e2128;
    --ed-text: #f0f2f5;
    --ed-muted: #9aa3af;
    --ed-border: #2c313a;
    --ed-nav: #1a1d23;
    /* emerald-dark inverts each ramp — its `300` is the darkest usable step, not
       the lightest — so the light theme's tints read as dark-on-dark here. The
       high steps are the dark theme's tints; keep them for anything painted on
       one of the translucent fills below. */
    /* The brand alpha token, not a literal rgba: the customizer repoints the
       primary family, and a hardcoded green pill would stay green under a
       recoloured theme while its own text followed the new accent. */
    --ed-active: var(--emerald-primary-alpha-20, rgba(46, 204, 119, 0.2));
    --ed-active-text: var(--emerald-primary-800, #8ce7b6);
    --ed-delta-up-bg: rgba(31, 174, 96, 0.16);
    --ed-delta-up: var(--emerald-primary-800, #8ce7b6);
    --ed-delta-down-bg: rgba(223, 53, 67, 0.16);
    --ed-delta-down: var(--emerald-danger-600, #f7a9b0);
    --ed-tip: #2f343d;
}

  /* The theme adapter emits `[data-theme='emerald'] { color: … }` at the same
     specificity as `.ed` but later in the cascade, so the light-mode token wins
     and everything inheriting `color` (the brand, headings) stays dark on dark.
     Restating the shell's own text color at a higher specificity settles it. */
.ed[data-theme] {
    color: var(--ed-text);
}
.ed *,
  .ed *::before,
  .ed *::after {
    box-sizing: border-box;
}
.ed-scrim {
    display: none;
}
.ed-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
    width: var(--ed-nav-w);
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: var(--emerald-spacing-s, 12px) var(--emerald-spacing-xs, 8px);
    background: var(--ed-nav);
    border-right: var(--emerald-stroke-s, 1px) solid var(--ed-border);
    overflow: hidden;
    transition:
      width var(--ed-motion) var(--ed-ease),
      transform var(--ed-motion) var(--ed-ease);
}
.ed-nav__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--emerald-spacing-xs, 8px);
    padding: 0 var(--emerald-spacing-2xs, 4px);
    min-height: 40px;
}
.ed-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.ed-brand__mark {
    width: 22px;
    height: 22px;
    background: url('/demo/emerald/emerald/logo.png') center / contain no-repeat;
    flex: none;
}
.ed-brand__name {
    font-weight: var(--emerald-text-b2-bold-weight, 600);
    font-size: var(--emerald-text-b2-size, 14px);
    white-space: nowrap;
}

  /*
   * EmButton owns paint (tertiary) and the reset; box-sizing: border-box above
   * plus a fixed square means its size padding never expands the hit target,
   * so these need no specificity fight with `.emerald-button[data-size]`.
   */
.ed-icon-btn {
    width: 32px;
    height: 32px;
    flex: none;
}
.ed-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-s, 12px);
    flex: 1;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
    /* Scroller spans to the nav's edges so the scrollbar sits flush; the
       nav's horizontal inset moves onto the list content instead. */
    margin-inline: calc(var(--emerald-spacing-xs, 8px) * -1);
    padding-inline: var(--emerald-spacing-xs, 8px);
    /* Edge fades appear only when content remains in that direction: the
       fade sizes ride the list's own scroll timeline, and when nothing
       overflows the timeline is inactive so both stay at 0. */
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--ed-nav-fade-top),
      #000 calc(100% - var(--ed-nav-fade-bottom)),
      transparent 100%
    );
    animation: ed-nav-fade linear both;
    animation-timeline: scroll(self y);
}
@property --ed-nav-fade-top {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}
@property --ed-nav-fade-bottom {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}
@keyframes ed-nav-fade {
0% {
      --ed-nav-fade-top: 0px;
      --ed-nav-fade-bottom: 28px;
}
10% {
      --ed-nav-fade-top: 28px;
}
90% {
      --ed-nav-fade-bottom: 28px;
}
100% {
      --ed-nav-fade-top: 28px;
      --ed-nav-fade-bottom: 0px;
}
}
.ed-nav__list::-webkit-scrollbar {
    display: none;
}
.ed-nav__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ed-nav__group-label {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-xs, 8px) var(--emerald-spacing-2xs, 4px);
    color: var(--ed-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ed-nav__bottom {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
    padding-top: var(--emerald-spacing-s, 12px);
    border-top: var(--emerald-stroke-s, 1px) solid var(--ed-border);
}
a.ed-nav__item {
    text-decoration: none;
}
.ed-nav__item {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 0 var(--emerald-spacing-xs, 8px);
    border: 0;
    border-radius: var(--emerald-radius-m, 8px);
    background: transparent;
    color: var(--ed-text);
    font: inherit;
    font-size: var(--emerald-text-b2-size, 14px);
    text-align: start;
    cursor: pointer;
}
.ed-nav__item:hover {
    background: var(--ed-bg);
}
.ed-nav__item[data-active] {
    background: var(--ed-active);
    color: var(--ed-active-text);
    font-weight: var(--emerald-text-b2-bold-weight, 600);
}
.ed-nav__glyph {
    display: inline-flex;
    width: 20px;
    justify-content: center;
    flex: none;
    color: inherit;
    opacity: 0.9;
}
.ed-nav__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--ed-motion) var(--ed-ease);
}
.ed-nav__dark {
    cursor: default;
}
.ed-nav__switch {
    margin-left: auto;
}
.ed-user {
    width: 100%;
    margin-top: var(--emerald-spacing-xs, 8px);
}

  /* EmButton wraps the slot in an inline-flex Content shell — stretch it so the
     avatar / name / chevron still lay out as a full-width row. */
.ed-user .emerald-button__content {
    flex: 1;
    min-width: 0;
    gap: var(--emerald-spacing-xs, 8px);
}
.ed-user__meta {
    flex: 1;
    min-width: 0;
    text-align: start;
}
.ed-user__name {
    display: block;
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: var(--emerald-text-b2-bold-weight, 600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ed-user__chevron {
    --emerald-icon-size: 16px;
    color: var(--ed-muted);
}

  /* Emerald's chip is a fixed dark neutral, which sinks into this shell's
     hand-rolled dark palette, so the surface is restated. */
.ed .ed-tip {
    background: var(--ed-tip);
}

  /*
   * Rail tooltips only: the anchor is the centered rail square, not the rail
   * itself, and anchor positioning hardcodes `margin: unset` — so clearing the
   * rail edge means translating by the gutter the centering left behind, plus
   * a gap. The topbar's tooltips sit below their triggers and need no shift.
   */
.ed .ed-nav .ed-tip {
    translate: calc((var(--ed-nav-w) - var(--ed-rail-size)) / 2 + var(--emerald-spacing-xs, 8px)) 0;
}
.ed[data-mode='dark'] .ed-tip {
    box-shadow:
      0 0 0 var(--emerald-stroke-s, 1px) var(--ed-border),
      var(--emerald-shadow-m, 0 2px 4px 0 rgba(0, 0, 0, 0.4));
}

  /* EmButton's tertiary paint is token-driven; this shell's dark mode is a
     hand-rolled --ed-* palette, so the chrome's icon buttons need it re-stated. */
.ed[data-mode='dark'] .ed-nav .emerald-button[data-variant='tertiary'],
  .ed[data-mode='dark'] .ed-topbar .emerald-button[data-variant='tertiary'] {
    color: var(--ed-text);
}
.ed[data-mode='dark'] .ed-nav .emerald-button[data-variant='tertiary']:hover:not([data-disabled]):not(:active),
  .ed[data-mode='dark'] .ed-topbar .emerald-button[data-variant='tertiary']:hover:not([data-disabled]):not(:active) {
    background: var(--ed-bg);
}
.ed-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-m, 16px);
    height: var(--ed-topbar-h);
    padding: 0 var(--emerald-spacing-l, 20px);
    background: var(--ed-surface);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--ed-border);
}
.ed-topbar__search {
    position: relative;
    flex: 1;
    max-width: 360px;
    min-width: 0;
}
.ed-topbar__search .emerald-text-field__control {
    padding-inline-start: 2.25rem;
    padding-inline-end: 3rem;
}

  /*
   * The one icon that stays inline. It paints a pseudo-element, and CSS cannot
   * read the `search` role out of the icon module — keep this copy in step with
   * `search` in packages/emerald/src/icons.ts by hand.
   */
.ed-topbar__search::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.7rem;
    width: 16px;
    height: 16px;
    translate: 0 -50%;
    background: currentColor;
    color: var(--ed-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}
.ed-topbar__kbd {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    translate: 0 -50%;
    padding: 1px 6px;
    border: var(--emerald-stroke-s, 1px) solid var(--ed-border);
    border-radius: var(--emerald-radius-xs, 4px);
    background: var(--ed-bg);
    color: var(--ed-muted);
    font-size: 11px;
    font-family: inherit;
    pointer-events: none;
}
.ed-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-2xs, 4px);
    margin-left: auto;
    flex: none;
}
.ed-topbar__icon {
    width: 34px;
    height: 34px;
    flex: none;
}

  /* EmButton is already position: relative, and its Content shell is static —
     so the badge anchors to the button box, not to the icon row. */
.ed-topbar__badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 14px;
    min-height: 14px;
    padding: 0 3px;
    font-size: 10px;
    line-height: 14px;
    box-shadow: 0 0 0 var(--emerald-stroke-m, 2px) var(--ed-surface);
}
.ed-topbar__rule {
    width: var(--emerald-stroke-s, 1px);
    height: 20px;
    margin-inline: var(--emerald-spacing-2xs, 4px);
    background: var(--ed-border);
    flex: none;
}
.ed-topbar__user {
    position: relative;
    display: inline-flex;
    flex: none;
}

  /* The avatar is a circle, so a corner-pinned dot lands outside it entirely —
     inset both axes until the dot's centre sits inside the radius and only its
     ring breaks the rim. */
.ed-topbar__status {
    position: absolute;
    right: 2px;
    bottom: 2px;
    box-shadow: 0 0 0 var(--emerald-stroke-m, 2px) var(--ed-surface);
}

  /* EmTextField paints from Emerald's light tokens; the shell's dark mode is a
     hand-rolled --ed-* palette, so the search control is re-stated. */
.ed[data-mode='dark'] .ed-topbar .emerald-text-field__control {
    background: var(--ed-bg);
    border-color: var(--ed-border);
    color: var(--ed-text);
}
.ed[data-mode='dark'] .ed-topbar .emerald-text-field__control::placeholder {
    color: var(--ed-muted);
}
.ed-main {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xl, 24px);
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--emerald-spacing-2xl, 32px) clamp(1rem, 2vw, 2.5rem) 3rem;
}
.ed-main--bare {
    padding: 0;
    gap: 0;
}

  /* Non-bare pages carry the sticky topbar above main — keep the pair filling
     one viewport instead of guaranteeing a topbar's worth of scroll. */
.ed:not([data-bare]) .ed-main {
    min-height: calc(100vh - var(--ed-topbar-h));
    min-height: calc(100dvh - var(--ed-topbar-h));
}

  /* Mobile: drawer overlays content; default closed via data-collapsed */
@media (max-width: 720px) {
.ed,
    .ed[data-mobile] {
      --ed-nav-w: 0px;
      padding-left: 0;
}
.ed-menu-fab {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 40;
      width: 44px;
      height: 44px;
      box-shadow: var(--emerald-shadow-m, 0 2px 4px 0 rgba(51, 51, 51, 0.15));
}

    /* Outranks `.emerald-button[data-variant='tertiary']`: a floating button
       over page content needs an opaque surface, not tertiary's transparent. */
.ed .ed-menu-fab.emerald-button {
      background: var(--ed-surface, var(--emerald-background, #fefefe));
}
.ed-scrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 25;
      background: rgba(15, 23, 32, 0.4);
}
.ed-nav {
      --ed-nav-w: min(280px, 86vw);
      width: var(--ed-nav-w);
      transform: translateX(0);
      box-shadow: var(--emerald-shadow-l, 0 5px 12px -1px rgba(51, 51, 51, 0.2));
}
.ed[data-collapsed] .ed-nav {
      transform: translateX(-105%);
      pointer-events: none;
}

    /* The fixed menu FAB overlays the topbar's left edge — clear it. */
.ed-topbar {
      padding-left: 4rem;
}

    /* 390px leaves room for the search field plus a short action row; the
       secondary ones drop rather than squeezing search to nothing. The
       customizer is exempt — it is the showcase's entry point, and dropping it
       strands the whole panel on mobile. */
.ed-topbar__icon--wide:not([data-customizer-trigger]) {
      display: none;
}

    /* The topbar already clears the FAB, so main needs no extra headroom. */
.ed-main:not(.ed-main--bare) {
      padding: 1rem 1rem 1.5rem;
}
.ed-main--bare {
      /* Leave room for FAB over full-bleed pages */
      padding-top: 0;
}
}

  /* Desktop collapsed = icon rail */
@media (min-width: 721px) {
.ed[data-collapsed] {
      --ed-nav-w: 72px;
}

    /* Text collapses instead of unmounting: the label keeps naming the link for
       assistive tech, and nothing reflows or wraps mid-transition. */
.ed[data-collapsed] .ed-brand__name,
    .ed[data-collapsed] .ed-nav__label,
    .ed[data-collapsed] .ed-nav__group-label,
    .ed[data-collapsed] .ed-user__meta,
    .ed[data-collapsed] .ed-user__chevron {
      flex: 0 0 0;
      width: 0;
      padding: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
}
.ed[data-collapsed] .ed-nav__top {
      flex-direction: column;
      gap: var(--emerald-spacing-2xs, 4px);
      padding: 0;
}
.ed[data-collapsed] .ed-brand {
      justify-content: center;
      width: var(--ed-rail-size);
      height: var(--ed-rail-size);
      border-radius: var(--emerald-radius-m, 8px);
      gap: 0;
}
.ed[data-collapsed] .ed-brand:hover {
      background: var(--ed-bg);
}
.ed[data-collapsed] .ed-nav__item,
    .ed[data-collapsed] .ed-user {
      width: var(--ed-rail-size);
      height: var(--ed-rail-size);
      min-height: var(--ed-rail-size);
      margin-inline: auto;
      padding: 0;
      justify-content: center;
      gap: 0;
}
.ed[data-collapsed] .ed-user {
      margin-top: var(--emerald-spacing-xs, 8px);
}
.ed[data-collapsed] .ed-user .emerald-button__content {
      flex: none;
      gap: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.ed,
    .ed-nav,
    .ed-nav__label,
    .ed-brand__name,
    .ed-user__meta,
    .ed-user__chevron {
      transition: none;
}
}

.adm-analytics {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
}

  /* EmCard variant="simple" ships 2px padding and its slots add none, so every
     card needs its own inset — see the EmCard padding gap row. */
.adm-analytics .emerald-card {
    padding: var(--emerald-spacing-l, 20px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-analytics__title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-analytics__subtitle {
    margin: 0.25rem 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-analytics__panel-title {
    font-size: var(--emerald-text-b1-size, 16px) !important;
    font-weight: 700 !important;
}
.adm-analytics__panel-sub {
    margin: 2px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-analytics__delta {
    font-style: normal;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    color: var(--emerald-danger-500, #c61424);
}
.adm-analytics__delta[data-up] {
    color: var(--emerald-primary-700, #027d4c);
}
.adm-analytics__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--emerald-spacing-m, 16px);
}

  /* .emerald-card__header is flex-direction: column — a title/action row has to
     opt back into row explicitly. */
.adm-analytics__hero-head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-analytics__hero-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-analytics__panel--hero .emerald-card__body {
    display: flex;
    flex-direction: column;
}
.adm-analytics__area {
    width: 100%;
    height: 190px;
}
.adm-analytics__axis {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: var(--emerald-spacing-xs, 8px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-analytics__session {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--emerald-spacing-s, 12px);
    margin-top: auto;
    padding-top: var(--emerald-spacing-m, 16px);
}
.adm-analytics__session > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--emerald-spacing-s, 12px);
    border-radius: var(--emerald-radius-m, 8px);
    background: var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-analytics__session strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-analytics__rail {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
}
.adm-analytics__queries {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-s, 12px);
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-analytics__queries li {
    display: grid;
    grid-template-columns: minmax(0, 108px) minmax(0, 1fr) 48px;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-analytics__queries code {
    overflow: hidden;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adm-analytics__queries strong {
    font-size: var(--emerald-text-b3-size, 12px);
    text-align: right;
}
.adm-analytics__query-track {
    height: 8px;
    border-radius: 4px;
    background: var(--emerald-neutral-200, #f6f8fa);
    overflow: hidden;
}
.adm-analytics__query-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--emerald-primary-600, #1fae60);
}
.adm-analytics__segbar {
    display: flex;
    height: 36px;
    margin-top: var(--emerald-spacing-xs, 8px);
    border-radius: var(--emerald-radius-m, 8px);
    overflow: hidden;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.adm-analytics__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--emerald-primary-800, #01603a);
    color: var(--emerald-on-primary, #fff);
}
.adm-analytics__seg[data-tone='mid'] {
    background: var(--emerald-primary-600, #1fae60);
}
.adm-analytics__seg[data-tone='light'] {
    background: var(--emerald-primary-500, #26c26d);
}
.adm-analytics__seg[data-tone='pale'] {
    background: var(--emerald-primary-300, #baedd0);
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-analytics__seg[data-tone='muted'] {
    background: var(--emerald-neutral-300, #ccd6e7);
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-analytics__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--emerald-spacing-s, 12px) var(--emerald-spacing-m, 16px);
    margin: var(--emerald-spacing-m, 16px) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--emerald-text-b3-size, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-analytics__legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.adm-analytics__legend strong {
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-analytics__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--emerald-primary-800, #01603a);
}
.adm-analytics__dot[data-tone='mid'] {
    background: var(--emerald-primary-600, #1fae60);
}
.adm-analytics__dot[data-tone='light'] {
    background: var(--emerald-primary-500, #26c26d);
}
.adm-analytics__dot[data-tone='pale'] {
    background: var(--emerald-primary-300, #baedd0);
}
.adm-analytics__dot[data-tone='muted'] {
    background: var(--emerald-neutral-300, #ccd6e7);
}
.adm-analytics__table-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-analytics__table-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-analytics__search {
    width: 200px;
}
.adm-analytics__table-wrap {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--emerald-spacing-l, 20px));
}
.adm-analytics__table th:first-child,
  .adm-analytics__table td:first-child {
    padding-left: var(--emerald-spacing-l, 20px);
}
.adm-analytics__table th:last-child,
  .adm-analytics__table td:last-child {
    padding-right: var(--emerald-spacing-l, 20px);
}
.adm-analytics__table tbody tr {
    transition: background-color 120ms ease;
}
.adm-analytics__table tbody tr:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-analytics__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--emerald-text-b2-size, 14px);
    white-space: nowrap;
}
.adm-analytics__table th {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    text-align: left;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-analytics__table td {
    padding: var(--emerald-spacing-s, 12px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-analytics__client {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-analytics__client strong {
    display: block;
}
.adm-analytics__client-sub {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-analytics__progress-cell {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    min-width: 160px;
}
.adm-analytics__progress-cell .emerald-progress {
    flex: 1;
}
.adm-analytics__strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
}
.adm-analytics__strip-body {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-2xs, 4px);
    min-height: 118px;
}
.adm-analytics__strip-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 1.375rem;
    font-weight: 700;
}
.adm-analytics__strip-label {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-analytics__mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    margin-top: auto;
}
.adm-analytics__mini-bar {
    flex: 1;
    min-width: 4px;
    border-radius: 2px 2px 0 0;
    background: var(--emerald-primary-500, #26c26d);
}
.adm-analytics__mini-bar[data-down] {
    background: var(--emerald-neutral-300, #ccd6e7);
}
@media (max-width: 1200px) {
.adm-analytics__hero {
      grid-template-columns: 1fr;
}
.adm-analytics__strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
}
.adm-analytics__axis {
      flex-wrap: wrap;
}
}
@media (max-width: 640px) {
.adm-analytics__strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adm-analytics__session {
      grid-template-columns: 1fr;
}
.adm-analytics__search {
      width: 100%;
}
}

  /* The rail trails the grid — the reference leads with it. */
.adm-calendar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: var(--emerald-spacing-m, 16px);
    align-items: start;
}
.adm-calendar__side {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
}

  /* The mini rides EmCalendar's own card chrome; these two still need it. */
.adm-calendar__filters,
  .adm-calendar__agenda {
    padding: var(--emerald-spacing-m, 16px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}

  /* Compound selector: the DS title class carries its own h4 type, and a single
     page class would tie on specificity and lose to load order. */
.adm-calendar__mini .adm-calendar__mini-head {
    margin: var(--emerald-spacing-m, 16px) var(--emerald-spacing-m, 16px) 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.adm-calendar__mini-head + .emerald-calendar__mini {
    padding-top: var(--emerald-spacing-s, 12px);
}
.adm-calendar__filters {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-calendar__side-title {
    margin: 0;
    font-weight: 700;
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-calendar__filter-label {
    display: inline-flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    width: 100%;
}
.adm-calendar__filter-name {
    flex: 1;
}
.adm-calendar__filter-count {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-calendar__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-neutral-600, #939dac);
}
.adm-calendar__dot[data-tone='primary'] { background: var(--emerald-primary-600, #1fae60);
}
.adm-calendar__dot[data-tone='secondary'] { background: var(--emerald-secondary-600, #00b4dc);
}
.adm-calendar__dot[data-tone='info'] { background: var(--emerald-info-500, #3a70e2);
}
.adm-calendar__dot[data-tone='alert'] { background: var(--emerald-alert-600, #d9af00);
}
.adm-calendar__dot[data-tone='danger'] { background: var(--emerald-danger-500, #e5484d);
}
.adm-calendar__agenda ul {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-s, 12px);
    margin: var(--emerald-spacing-s, 12px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-calendar__agenda li {
    display: flex;
    align-items: flex-start;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-calendar__agenda .adm-calendar__dot {
    margin-top: 5px;
}
.adm-calendar__agenda-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.adm-calendar__agenda-title {
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.adm-calendar__agenda-when,
  .adm-calendar__agenda-empty {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 11px;
}
.adm-calendar__main-nav {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-calendar__main-title {
    margin-left: 4px;
}
.adm-calendar__main-title p {
    margin: 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 11px;
}
.adm-calendar__main-actions {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-calendar__dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 1024px) {
.adm-calendar {
      grid-template-columns: minmax(0, 1fr);
}
.adm-calendar__side {
      flex-direction: row;
      flex-wrap: wrap;
}
.adm-calendar__mini,
    .adm-calendar__filters,
    .adm-calendar__agenda {
      flex: 1;
      min-width: 220px;
}
}

  /* The month grid is the mini calendar's superset, so drop the duplicate and
     let the grid (with its events) sit near the top of the viewport. */
@media (max-width: 640px) {
.adm-calendar__mini {
      display: none;
}
.adm-calendar__filters {
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-m, 16px);
      align-items: center;
}
.adm-calendar__filters .adm-calendar__side-title {
      flex: 1 0 100%;
}
.adm-calendar__filter-count {
      display: none;
}
}

.adm-campaign {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
}

  /* EmCard variant="simple" ships 2px padding and its slots add none, so every
     card needs its own inset — see the EmCard padding gap row. */
.adm-campaign .emerald-card {
    padding: var(--emerald-spacing-l, 20px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-campaign__title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-campaign__subtitle {
    margin: 0.25rem 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-campaign__panel-title {
    font-size: var(--emerald-text-b1-size, 16px) !important;
    font-weight: 700 !important;
}
.adm-campaign__panel-sub {
    margin: 2px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-campaign__delta {
    font-style: normal;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    color: var(--emerald-danger-500, #c61424);
}
.adm-campaign__delta[data-up] {
    color: var(--emerald-primary-700, #027d4c);
}
.adm-campaign__layout {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: start;
    gap: var(--emerald-spacing-m, 16px);
}
.adm-campaign__rail,
  .adm-campaign__main {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
    min-width: 0;
}
.adm-campaign__funnel {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-campaign__funnel li {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
    padding: var(--emerald-spacing-s, 12px) 0;
}

  /* Connector spine between funnel nodes; the last stage ends the line. */
.adm-campaign__funnel li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 6px;
    width: 2px;
    height: 100%;
    background: var(--emerald-neutral-300, #ccd6e7);
}
.adm-campaign__funnel li:last-child::before {
    display: none;
}
.adm-campaign__funnel-node {
    position: relative;
    z-index: 1;
    flex: none;
    width: 14px;
    height: 14px;
    border: 3px solid var(--emerald-primary-600, #1fae60);
    border-radius: 50%;
    background: var(--emerald-background, #fefefe);
}
.adm-campaign__funnel-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: var(--emerald-text-b3-size, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-campaign__funnel-text strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-campaign__builder {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-campaign__segments {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xs, 8px);
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-campaign__segments li {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-m, 8px);
    transition: border-color 120ms ease, background-color 120ms ease;
}
.adm-campaign__segments li:hover {
    border-color: var(--emerald-primary-500, #26c26d);
}
.adm-campaign__segments li[data-selected] {
    border-color: var(--emerald-primary-600, #1fae60);
    background: var(--emerald-primary-100, #e7fff2);
}
.adm-campaign__segment-label {
    flex: 1;
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: 600;
}
.adm-campaign__reach {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding-top: var(--emerald-spacing-s, 12px);
    border-top: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-campaign__reach strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: 1.25rem;
}
.adm-campaign__cta {
    width: 100%;
}
.adm-campaign__summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--emerald-spacing-s, 12px);
    margin-top: var(--emerald-spacing-xs, 8px);
}
.adm-campaign__summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: var(--emerald-spacing-s, 12px);
    border-left: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-campaign__summary > div:first-child {
    padding-left: 0;
    border-left: 0;
}
.adm-campaign__summary-value {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.adm-campaign__summary-label {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-campaign__chart-title {
    margin: var(--emerald-spacing-l, 20px) 0 var(--emerald-spacing-xs, 8px);
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: 600;
}
.adm-campaign__area {
    width: 100%;
    height: 150px;
}
.adm-campaign__axis {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: var(--emerald-spacing-xs, 8px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-campaign__axis span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.adm-campaign__axis small {
    color: var(--emerald-on-surface, #2b2d2e);
    font-weight: 600;
}
.adm-campaign__table-wrap {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--emerald-spacing-l, 20px));
}
.adm-campaign__table th:first-child,
  .adm-campaign__table td:first-child {
    padding-left: var(--emerald-spacing-l, 20px);
}
.adm-campaign__table th:last-child,
  .adm-campaign__table td:last-child {
    padding-right: var(--emerald-spacing-l, 20px);
}
.adm-campaign__table tbody tr {
    transition: background-color 120ms ease;
}
.adm-campaign__table tbody tr:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-campaign__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--emerald-text-b2-size, 14px);
    white-space: nowrap;
}
.adm-campaign__table th {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    text-align: left;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-campaign__table td {
    padding: var(--emerald-spacing-s, 12px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-campaign__client {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-campaign__client strong {
    display: block;
}
.adm-campaign__client-sub {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
@media (max-width: 1200px) {
.adm-campaign__layout {
      grid-template-columns: 1fr;
}
.adm-campaign__summary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
}
.adm-campaign__summary > div:nth-child(4) {
      padding-left: 0;
      border-left: 0;
}
}
@media (max-width: 640px) {
.adm-campaign__summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adm-campaign__summary > div:nth-child(odd) {
      padding-left: 0;
      border-left: 0;
}
.adm-campaign__axis {
      font-size: 10px;
}
}

.adm-chat {
    display: grid;
    grid-template-columns: minmax(0, 312px) minmax(0, 1fr);
    gap: var(--emerald-spacing-m, 16px);
    height: calc(100vh - 140px);
    min-height: 560px;
}
.adm-chat__list-pane,
  .adm-chat__thread {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-chat__list-pane {
    padding: var(--emerald-spacing-m, 16px) var(--emerald-spacing-s, 12px);
    gap: var(--emerald-spacing-s, 12px);
}
.adm-chat__list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--emerald-spacing-xs, 8px);
    padding: 0 4px;
}
.adm-chat__title {
    margin: 0;
    font-size: var(--emerald-text-h4-size, 20px);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.adm-chat__title-badge {
    padding: 2px var(--emerald-spacing-xs, 8px);
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-primary-100, #e7fff2);
    color: var(--emerald-primary-700, #027d4c);
    font-size: 11px;
    font-weight: 700;
}

  /* Segmented row above the search, borderless — the reference underlines a
     tab strip below it. */
.adm-chat__filters {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--emerald-radius-l, 10px);
    background: var(--emerald-neutral-200, #f6f8fa);
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.adm-chat__filter {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px var(--emerald-spacing-xs, 8px);
    white-space: nowrap;
    border: none;
    border-radius: var(--emerald-radius-s, 6px);
    background: transparent;
    color: var(--emerald-on-surface-variant, #757e85);
    font: inherit;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    cursor: pointer;
}
.adm-chat__filter:hover {
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-chat__filter[data-active] {
    background: var(--emerald-background, #fefefe);
    color: var(--emerald-primary-700, #027d4c);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-chat__filter em {
    font-style: normal;
    font-weight: 400;
    opacity: 0.7;
}
.adm-chat__filter:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: -2px;
}
.adm-chat__rail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}
.adm-chat__group {
    margin: 0;
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-xs, 8px) 2px;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.adm-chat__rail .emerald-list {
    gap: 2px;
}
.adm-chat__conversation {
    padding: var(--emerald-spacing-xs, 8px);
}
.adm-chat__avatar-wrap {
    position: relative;
    flex: none;
    display: inline-flex;
}

  /* Channels read as squared tiles, people stay circular. */
.adm-chat__avatar-wrap[data-kind='channel'] .emerald-avatar {
    border-radius: var(--emerald-radius-m, 8px);
}
.adm-chat__online {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--emerald-background, #fefefe);
    border-radius: 50%;
    background: var(--emerald-primary-600, #1fae60);
}

  /* The name shares its line with the unread badge, the preview shares its own
     with the timestamp — so both leaves become space-between rows and the
     ellipsis moves onto the text inside them. */
.adm-chat__conversation .emerald-list__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--emerald-spacing-xs, 8px);
    overflow: visible;
}
.adm-chat__conversation .emerald-list__title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adm-chat__conversation .emerald-list__subtitle {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--emerald-spacing-xs, 8px);
    overflow: visible;
}
.adm-chat__conversation .emerald-list__subtitle time {
    flex: none;
    font-size: 11px;
}
.adm-chat__conversation-preview {
    overflow: hidden;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adm-chat__unread-count {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--emerald-primary-600, #1fae60);
    color: var(--emerald-on-primary, #fff);
    font-size: 11px;
    font-weight: 700;
}
.adm-chat__empty {
    margin: 0;
    padding: var(--emerald-spacing-m, 16px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
    text-align: center;
}
.adm-chat__thread {
    gap: 0;
}
.adm-chat__thread-head {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
    padding: var(--emerald-spacing-s, 12px) var(--emerald-spacing-m, 16px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-chat__thread-who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
.adm-chat__thread-tag {
    flex: none;
}
.adm-chat__back {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin-left: -4px;
    border: none;
    border-radius: var(--emerald-radius-m, 8px);
    background: transparent;
    color: var(--emerald-on-surface, #2b2d2e);
    cursor: pointer;
}
.adm-chat__back:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-chat__thread-topic {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-chat__messages {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--emerald-spacing-s, 12px);
    padding: var(--emerald-spacing-m, 16px);
    overflow-y: auto;
}
.adm-chat__day {
    align-self: center;
    margin: 0;
    padding: 2px var(--emerald-spacing-s, 12px);
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 11px;
    font-weight: 600;
}
.adm-chat__bubble-row {
    display: flex;
    align-items: flex-end;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-chat__bubble-row[data-from='me'] {
    justify-content: flex-end;
}
.adm-chat__bubble-avatar {
    flex: none;
    margin-bottom: 16px;
}
.adm-chat__bubble-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 62%;
}
.adm-chat__bubble-row[data-from='me'] .adm-chat__bubble-stack {
    align-items: flex-end;
}

  /* Asymmetric corner points the bubble at its speaker. */
.adm-chat__bubble {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-l, 10px) var(--emerald-radius-l, 10px) var(--emerald-radius-l, 10px) 2px;
    background: var(--emerald-background, #fefefe);
    font-size: var(--emerald-text-b2-size, 14px);
    line-height: 1.5;
}
.adm-chat__bubble-row[data-from='me'] .adm-chat__bubble {
    border-radius: var(--emerald-radius-l, 10px) var(--emerald-radius-l, 10px) 2px;
    border-color: var(--emerald-primary-300, #baedd0);
    background: var(--emerald-primary-100, #e7fff2);
}
.adm-chat__bubble-meta {
    padding: 0 2px;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 10px;
}
.adm-chat__composer {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    margin: 0 var(--emerald-spacing-m, 16px) var(--emerald-spacing-m, 16px);
    padding: var(--emerald-spacing-xs, 8px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-chat__composer-field {
    flex: 1;
}
.adm-chat__thread-empty {
    margin: auto;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}

  /* Single column: the thread becomes a detail view the list pushes onto, so a
     tap always leads somewhere. */
@media (max-width: 900px) {
.adm-chat {
      grid-template-columns: minmax(0, 1fr);
      height: auto;
}
.adm-chat__thread {
      display: none;
}
.adm-chat[data-detail] .adm-chat__list-pane {
      display: none;
}
.adm-chat[data-detail] .adm-chat__thread {
      display: flex;
      height: calc(100vh - 160px);
      min-height: 480px;
}
.adm-chat[data-detail] .adm-chat__back {
      display: inline-flex;
}
.adm-chat__bubble-stack {
      max-width: 78%;
}
}

.ec {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--ed-bg, var(--emerald-neutral-200, #f6f8fa));
}
.ec-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--emerald-spacing-m, 16px);
    padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
    max-width: 34rem;
}
.ec-kicker {
    margin: 0;
    color: var(--emerald-primary-600, #1fae60);
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ec-title {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ed-text, var(--emerald-on-surface, #2b2d2e));
}
.ec-body {
    margin: 0;
    color: var(--ed-muted, var(--emerald-on-surface-variant, #757e85));
    font-size: var(--emerald-text-b1-size, 16px);
    line-height: 1.55;
}
.ec-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    background:
      linear-gradient(120deg, rgba(15, 23, 32, 0.35), rgba(15, 23, 32, 0.15)),
      url('/demo/emerald/emerald/contact-hero.jpg') center / cover no-repeat;
    border-radius: 0;
}
.ec-card.emerald-card {
    width: min(100%, 501px);
    background: var(--emerald-background, #fefefe);
    border: 0;
    border-radius: var(--emerald-radius-m, 8px);
    box-shadow: var(--emerald-shadow-l, 0 5px 12px -1px rgba(51, 51, 51, 0.2));
}
.ec-form {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
    width: 100%;
}
.ec-note {
    margin: 0;
    font-size: var(--emerald-text-b1-size, 16px);
    line-height: 1.5;
    color: var(--emerald-on-surface, #2b2d2e);
}
.ec-note a {
    color: var(--emerald-secondary-600, #00b4dc);
    font-weight: 600;
    text-decoration: none;
}
.ec-note a:hover {
    text-decoration: underline;
}
.ec-submit {
    width: 100%;
}
.ec-thanks {
    margin: 0;
    color: var(--emerald-primary-700, #027d4c);
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: 600;
}
@media (max-width: 960px) {
.ec {
      grid-template-columns: 1fr;
}
.ec-copy {
      max-width: none;
      /* Clear fixed mobile menu FAB */
      padding-top: calc(3.5rem + env(safe-area-inset-top, 0px));
      padding-bottom: 1rem;
}
.ec-hero {
      min-height: 70vh;
}
}

.adm-contact {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    gap: var(--emerald-spacing-m, 16px);
    height: calc(100vh - 140px);
    min-height: 560px;
}
.adm-contact__side {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-s, 12px);
    max-height: 100%;
    overflow-y: auto;
    padding: var(--emerald-spacing-s, 12px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-contact__summary {
    display: flex;
    flex-direction: column;
    padding: var(--emerald-spacing-s, 12px);
    border-radius: var(--emerald-radius-l, 10px);
    background: var(--emerald-primary-100, #e7fff2);
    color: var(--emerald-primary-700, #027d4c);
}
.adm-contact__summary-count {
    font-size: var(--emerald-text-h3-size, 24px);
    font-weight: 700;
    line-height: 1.1;
}
.adm-contact__summary-label {
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.adm-contact__summary-meta {
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.85;
}
.adm-contact__new {
    margin-top: auto;
    width: 100%;
    justify-content: center;
}
.adm-contact__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.adm-contact__folder {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    width: 100%;
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    border: none;
    border-radius: var(--emerald-radius-m, 8px);
    background: transparent;
    color: var(--emerald-on-surface, #2b2d2e);
    font: inherit;
    font-size: var(--emerald-text-b2-size, 14px);
    text-align: left;
    cursor: pointer;
}
.adm-contact__folder span {
    flex: 1;
}
.adm-contact__folder:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-contact__folder[data-active] {
    background: var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-primary-700, #027d4c);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--emerald-primary-600, #1fae60);
}
.adm-contact__folder em {
    font-style: normal;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-contact__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--emerald-primary-600, #1fae60);
}
.adm-contact__dot[data-tone='Docs'] { background: var(--emerald-info-500, #3a70e2);
}
.adm-contact__dot[data-tone='Design'] { background: var(--emerald-secondary-600, #00b4dc);
}
.adm-contact__dot[data-tone='Sponsor'] { background: var(--emerald-alert-600, #d9af00);
}
.adm-contact__dot[data-tone='Triage'] { background: var(--emerald-danger-500, #c61424);
}
.adm-contact__dot[data-tone='Community'] { background: var(--emerald-neutral-600, #939dac);
}
.adm-contact__main {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-s, 12px);
    height: 100%;
    min-height: 0;
    padding: var(--emerald-spacing-m, 16px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-contact__toolbar {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-contact__search {
    flex: 1;
    min-width: 0;
}
.adm-contact__result {
    flex: none;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-contact__labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-bottom: var(--emerald-spacing-s, 12px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-contact__labels em {
    font-style: normal;
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-contact__clear {
    padding: 0 var(--emerald-spacing-xs, 8px);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-contact__empty {
    padding: var(--emerald-spacing-l, 20px) 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
    text-align: center;
}
.adm-contact__directory {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.adm-contact__group + .adm-contact__group {
    margin-top: var(--emerald-spacing-m, 16px);
}
.adm-contact__group-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    margin: 0 0 var(--emerald-spacing-xs, 8px);
    padding: 4px 0;
    background: var(--emerald-background, #fefefe);
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.adm-contact__group-head em {
    font-style: normal;
    color: var(--emerald-on-surface-variant, #757e85);
    font-weight: 600;
    letter-spacing: 0;
}
.adm-contact__directory .emerald-list {
    gap: 4px;
}

  /* Rows are carded and spaced rather than ruled into a continuous table. */
.adm-contact__card {
    gap: var(--emerald-spacing-s, 12px);
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
    border-radius: var(--emerald-radius-l, 10px);
}
.adm-contact__card:hover {
    border-color: var(--emerald-neutral-300, #ccd6e7);
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-contact__card .emerald-list__content {
    gap: 0;
}
.adm-contact__card-name {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    overflow: visible;
}
.adm-contact__card-name strong {
    overflow: hidden;
    font-size: var(--emerald-text-b2-size, 14px);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adm-contact__card-handle {
    flex: none;
    color: var(--emerald-on-surface-variant, #757e85);
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
}
.adm-contact__card-role {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-contact__card-region {
    flex: none;
    width: 168px;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 11px;
}
.adm-contact__card-tags {
    display: flex;
    flex: none;
    gap: 6px;
}
.adm-contact__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--emerald-radius-m, 8px);
    background: transparent;
    color: var(--emerald-neutral-500, #a3afbe);
    cursor: pointer;
}
.adm-contact__star:hover {
    background: var(--emerald-neutral-300, #ccd6e7);
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-contact__star[data-active] {
    color: var(--emerald-alert-600, #d9af00);
}

  /* Solid once starred. EmIcon draws strokes, so the fill is the caller's. */
.adm-contact__star[data-active] .emerald-icon {
    fill: currentColor;
}
.adm-contact__star:focus-visible,
  .adm-contact__folder:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: -2px;
}
@media (max-width: 1080px) {
.adm-contact__card-region {
      display: none;
}
}
@media (max-width: 900px) {
.adm-contact {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
      height: calc(100vh - 120px);
}
.adm-contact__new {
      margin-top: 0;
}
}

  /* Fold the rail into a scrolling chip row so the directory stays above the
     fold instead of sitting under a full-height sidebar. */
@media (max-width: 560px) {
.adm-contact__side {
      flex-direction: row;
      align-items: center;
      gap: var(--emerald-spacing-xs, 8px);
      padding: var(--emerald-spacing-xs, 8px);
}
.adm-contact__summary,
    .adm-contact__card-tags {
      display: none;
}
.adm-contact__list {
      flex: 1;
      flex-direction: row;
      gap: 4px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
}
.adm-contact__folder {
      width: auto;
      padding: 6px var(--emerald-spacing-xs, 8px);
      white-space: nowrap;
}
.adm-contact__new {
      flex: none;
      width: auto;
}
.adm-contact__toolbar {
      flex-wrap: wrap;
}
}

.ed-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--emerald-spacing-m, 16px);
}
.ed-title {
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.ed-subtitle {
    margin: 0.25rem 0 0;
    color: var(--ed-muted, var(--emerald-on-surface-variant, #757e85));
    font-size: var(--emerald-text-b1-size, 16px);
}
.ed-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
}
.ed-kpi.emerald-card,
  .ed-panel.emerald-card {
    background: var(--ed-surface, var(--emerald-background, #fefefe));
    border: var(--emerald-stroke-s, 1px) solid var(--ed-border, var(--emerald-neutral-300, #ccd6e7));
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
    color: var(--ed-text, var(--emerald-on-surface, #2b2d2e));
    padding: var(--emerald-spacing-m, 16px) var(--emerald-spacing-l, 20px);
}
.ed-kpi__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.ed-kpi__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ed-kpi__label {
    color: var(--ed-muted, var(--emerald-on-surface-variant, #757e85));
    font-size: var(--emerald-text-b2-size, 14px);
}
.ed-kpi__value {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.ed-kpi__delta {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--ed-delta-down-bg, var(--emerald-danger-100, #ffebee));
    color: var(--ed-delta-down, var(--emerald-danger-500, #c61424));
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.ed-kpi__delta[data-up] {
    background: var(--ed-delta-up-bg, var(--emerald-primary-100, #e7fff2));
    color: var(--ed-delta-up, var(--emerald-primary-700, #027d4c));
}
.ed-kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--emerald-radius-m, 8px);
    background: var(--ed-bg, var(--emerald-neutral-200, #f6f8fa));
    color: var(--ed-muted, var(--emerald-on-surface-variant, #757e85));
    flex: none;
}
.ed-charts {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: var(--emerald-spacing-m, 16px);
}
.ed-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--emerald-spacing-m, 16px);
}
.ed-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.ed-panel__title {
    font-size: var(--emerald-text-b1-size, 16px) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
.ed-chip {
    flex: none;
    padding: 4px 10px;
    border: var(--emerald-stroke-s, 1px) solid var(--ed-border, var(--emerald-neutral-300, #ccd6e7));
    border-radius: var(--emerald-radius-full, 999px);
    color: var(--ed-muted, var(--emerald-on-surface-variant, #757e85));
    font-size: var(--emerald-text-b3-size, 12px);
    white-space: nowrap;
}
.ed-chart-fill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border-radius: var(--emerald-radius-m, 8px);
    border: 1px dashed var(--ed-border, var(--emerald-neutral-300, #ccd6e7));
    background:
      repeating-linear-gradient(
        -12deg,
        transparent,
        transparent 10px,
        color-mix(in srgb, var(--emerald-primary-600, #1fae60) 6%, transparent) 10px,
        color-mix(in srgb, var(--emerald-primary-600, #1fae60) 6%, transparent) 11px
      ),
      var(--ed-bg, var(--emerald-neutral-200, #f6f8fa));
    color: var(--ed-muted, var(--emerald-on-surface-variant, #757e85));
}
.ed-chart-fill--area {
    min-height: 260px;
}
.ed-chart-fill--donut {
    min-height: 180px;
    margin-bottom: var(--emerald-spacing-m, 16px);
}
.ed-chart-fill--bars {
    min-height: 240px;
}
.ed-chart-fill__label {
    padding: 6px 10px;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--ed-surface, var(--emerald-background, #fefefe));
    border: var(--emerald-stroke-s, 1px) solid var(--ed-border, var(--emerald-neutral-300, #ccd6e7));
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.ed-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--emerald-text-b3-size, 12px);
    color: var(--ed-muted, var(--emerald-on-surface-variant, #757e85));
}
.ed-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ed-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}
.ed-legend i[data-c='a'] { background: #1fae60;
}
.ed-legend i[data-c='b'] { background: #df3543;
}
.ed-legend i[data-c='c'] { background: #ffcf06;
}
.ed-legend i[data-c='d'] { background: #3a70e2;
}
.ed-legend b {
    margin-left: auto;
    color: var(--ed-text, var(--emerald-on-surface, #2b2d2e));
    font-weight: 600;
}
.ed-activity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ed-activity__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
    padding: var(--emerald-spacing-xs, 8px) 0;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--ed-border, var(--emerald-neutral-300, #ccd6e7));
}
.ed-activity__row:last-child {
    border-bottom: 0;
}
.ed-activity__copy p {
    margin: 0;
    font-size: var(--emerald-text-b2-size, 14px);
    color: var(--ed-muted, var(--emerald-on-surface-variant, #757e85));
}
.ed-activity__copy strong {
    color: var(--ed-text, var(--emerald-on-surface, #2b2d2e));
    font-weight: 600;
}
.ed-activity__time {
    font-size: var(--emerald-text-b3-size, 12px);
    color: var(--ed-muted, var(--emerald-on-surface-variant, #757e85));
}
@media (max-width: 1100px) {
.ed-kpis {
      grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ed-charts,
    .ed-bottom {
      grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.ed-kpis {
      grid-template-columns: 1fr;
}
}

.adm-ledger {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
}
.adm-ledger .emerald-card {
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-ledger__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--emerald-spacing-m, 16px);
}
.adm-ledger__title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-ledger__sub {
    margin: 4px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-ledger__sub code {
    padding: 1px 5px;
    border-radius: var(--emerald-radius-xs, 4px);
    background: var(--emerald-neutral-200, #f6f8fa);
    font-size: 0.9em;
}

  /* Two stacked bands: ledger totals on top, the live controls beneath them. */
.adm-ledger__toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
    margin-bottom: 0;
    padding: var(--emerald-spacing-m, 16px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-ledger__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--emerald-spacing-l, 20px);
    margin: 0;
}
.adm-ledger__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-inline-start: var(--emerald-spacing-s, 12px);
    border-inline-start: 2px solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-ledger__stat dt {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.adm-ledger__stat dd {
    margin: 0;
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.adm-ledger__controls {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-ledger__search {
    flex: 1;
    min-width: 0;
}
.adm-ledger__rows {
    display: flex;
    align-items: center;
    flex: none;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-ledger__rows-label {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-ledger__rows-select {
    width: 76px;
}
.adm-ledger__table-wrap {
    overflow-x: auto;
}
.adm-ledger__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--emerald-text-b2-size, 14px);
    white-space: nowrap;
}
.adm-ledger__table th {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    text-align: left;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-ledger__table td {
    padding: var(--emerald-spacing-s, 12px);
    vertical-align: middle;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-ledger__table tbody tr:last-child td {
    border-bottom: none;
}
.adm-ledger__table tbody tr:hover td {
    background: var(--emerald-neutral-200, #f6f8fa);
}

  /* The tier reads off a leading rail rather than a second status pill. */
.adm-ledger__pick {
    width: 1%;
    border-inline-start: 3px solid transparent;
}
.adm-ledger__table tbody tr[data-tier='anchor'] .adm-ledger__pick {
    border-inline-start-color: var(--emerald-primary-600, #1fae60);
}
.adm-ledger__table tbody tr[data-tier='sustaining'] .adm-ledger__pick {
    border-inline-start-color: var(--emerald-primary-400, #6fdca4);
}
.adm-ledger__table tbody tr[data-tier='supporting'] .adm-ledger__pick {
    border-inline-start-color: var(--emerald-neutral-400, #aeb6be);
}
.adm-ledger__table tbody tr[data-tier='community'] .adm-ledger__pick {
    border-inline-start-color: var(--emerald-neutral-300, #ccd6e7);
}
.adm-ledger__sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.adm-ledger__sort:hover {
    color: var(--emerald-on-surface, #2b2d2e);
}

  /* Compact enough to sit inside the header text; below the icon scale. */
.adm-ledger__sort-icon {
    --emerald-icon-size: 12px;
    --emerald-icon-stroke: 2;
    opacity: 0.4;
}
.adm-ledger__sort-icon[data-direction='asc'] {
    opacity: 1;
    transform: scaleY(-1);
}
.adm-ledger__sort-icon[data-direction='desc'] {
    opacity: 1;
}
.adm-ledger__org strong {
    display: block;
    line-height: 20px;
}
.adm-ledger__handle {
    display: block;
    color: var(--emerald-on-surface-variant, #757e85);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--emerald-text-b3-size, 12px);
    line-height: 16px;
}
.adm-ledger__channel,
  .adm-ledger__since {
    color: var(--emerald-on-surface-variant, #757e85);
}

  /* The money column carries its own share bar, so the figure reads as a
     position in the ledger rather than a loose number. */
.adm-ledger__amount {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}
.adm-ledger__amount strong {
    font-variant-numeric: tabular-nums;
}
.adm-ledger__share {
    width: 100%;
}
.adm-ledger__renewal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-ledger__renewal::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.adm-ledger__renewal[data-renewal='active'] {
    color: var(--emerald-primary-700, #027d4c);
}
.adm-ledger__renewal[data-renewal='lapsed'] {
    color: var(--emerald-danger-600, #a1000e);
}
.adm-ledger__empty {
    padding: var(--emerald-spacing-l, 20px) !important;
    text-align: center;
    color: var(--emerald-on-surface-variant, #757e85);
}

  /* Mirrored from the usual count-then-pager order. */
.adm-ledger__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
    padding: var(--emerald-spacing-m, 16px);
    border-top: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-ledger__count {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-variant-numeric: tabular-nums;
}
.adm-ledger__foot .emerald-pagination__prev,
  .adm-ledger__foot .emerald-pagination__next {
    white-space: nowrap;
}
@media (max-width: 640px) {
.adm-ledger__head {
      flex-direction: column;
}
.adm-ledger__controls {
      flex-wrap: wrap;
}
.adm-ledger__search {
      flex-basis: 100%;
}
.adm-ledger__foot {
      flex-direction: column-reverse;
      justify-content: center;
}
}

.adm-ecommerce {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
}

  /* EmCard variant="simple" ships 2px padding and its slots add none, so every
     card needs its own inset — see the EmCard padding gap row. */
.adm-ecommerce .emerald-card {
    padding: var(--emerald-spacing-l, 20px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-ecommerce__title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-ecommerce__subtitle {
    margin: 0.25rem 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-ecommerce__panel-title {
    font-size: var(--emerald-text-b1-size, 16px) !important;
    font-weight: 700 !important;
}
.adm-ecommerce__panel-sub {
    margin: 2px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-ecommerce__delta {
    font-style: normal;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    color: var(--emerald-danger-500, #c61424);
}
.adm-ecommerce__delta[data-up] {
    color: var(--emerald-primary-700, #027d4c);
}
.adm-ecommerce__featured {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
}
.adm-ecommerce__tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

  /* Same dashed hatch paint texture EmeraldDashboard uses for chart placeholders. */
.adm-ecommerce__thumb {
    --angle: -12deg;
    display: block;
    height: 96px;
    margin-bottom: var(--emerald-spacing-s, 12px);
    border: 1px dashed var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-m, 8px);
    background:
      repeating-linear-gradient(
        var(--angle),
        transparent,
        transparent 10px,
        color-mix(in srgb, var(--emerald-primary-600, #1fae60) 10%, transparent) 10px,
        color-mix(in srgb, var(--emerald-primary-600, #1fae60) 10%, transparent) 12px
      ),
      var(--emerald-neutral-200, #f6f8fa);
}
.adm-ecommerce__tile-name {
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-ecommerce__tile-author {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-ecommerce__tile-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--emerald-spacing-xs, 8px);
    margin-top: var(--emerald-spacing-s, 12px);
}
.adm-ecommerce__tile-price {
    font-size: 1.25rem;
    font-weight: 700;
}
.adm-ecommerce__tile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-ecommerce__star {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--emerald-primary-600, #1fae60);
    font-weight: 600;
}

  /* Ratings read as solid; the shared role draws an outline. */
.adm-ecommerce__star .emerald-icon {
    --emerald-icon-size: 13px;
    fill: currentColor;
}
.adm-ecommerce__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: var(--emerald-spacing-m, 16px);
}
.adm-ecommerce__split .emerald-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

  /* .emerald-card__header is flex-direction: column — a title/action row has to
     opt back into row explicitly. */
.adm-ecommerce__revenue-head,
  .adm-ecommerce__toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-ecommerce__headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-ecommerce__queue {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
    margin: var(--emerald-spacing-m, 16px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-ecommerce__queue li {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-ecommerce__queue-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-ecommerce__queue-text strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-ecommerce__bars {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-ecommerce__bars li {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr) 56px;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-ecommerce__bar-label {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-ecommerce__bar-track {
    height: 12px;
    border-radius: 6px;
    background: var(--emerald-neutral-200, #f6f8fa);
    overflow: hidden;
}
.adm-ecommerce__bar-fill {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: var(--emerald-primary-600, #1fae60);
}
.adm-ecommerce__bar-value {
    font-size: var(--emerald-text-b2-size, 14px);
    text-align: right;
}
.adm-ecommerce__note {
    margin: auto 0 0;
    padding-top: var(--emerald-spacing-m, 16px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-ecommerce__toolbar-filters,
  .adm-ecommerce__toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-ecommerce__select {
    width: 150px;
}
.adm-ecommerce__show-select {
    width: 76px;
}
.adm-ecommerce__search {
    width: 210px;
}
.adm-ecommerce__table-wrap {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--emerald-spacing-l, 20px));
}
.adm-ecommerce__table th:first-child,
  .adm-ecommerce__table td:first-child {
    padding-left: var(--emerald-spacing-l, 20px);
}
.adm-ecommerce__table th:last-child,
  .adm-ecommerce__table td:last-child {
    padding-right: var(--emerald-spacing-l, 20px);
}
.adm-ecommerce__table tbody tr {
    transition: background-color 120ms ease;
}
.adm-ecommerce__table tbody tr:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-ecommerce__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--emerald-text-b2-size, 14px);
    white-space: nowrap;
}
.adm-ecommerce__table th {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    text-align: left;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-ecommerce__table td {
    padding: var(--emerald-spacing-s, 12px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-ecommerce__client {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-ecommerce__client strong {
    display: block;
}
.adm-ecommerce__client-sub {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-ecommerce__table-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-ecommerce__table-count {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-ecommerce__page-gap {
    padding: 0 var(--emerald-spacing-2xs, 4px);
    color: var(--emerald-on-surface-variant, #757e85);
}
@media (max-width: 1200px) {
.adm-ecommerce__featured {
      grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adm-ecommerce__split {
      grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.adm-ecommerce__featured {
      grid-template-columns: 1fr;
}
.adm-ecommerce__select,
    .adm-ecommerce__search {
      width: 100%;
}
.adm-ecommerce__bars li {
      grid-template-columns: 110px minmax(0, 1fr) 50px;
}
}

.adm-faq {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xl, 28px);
}
.adm-faq .emerald-card {
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
}

  /* Asymmetric band: the pitch on the left, the working control on the right. */
.adm-faq__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: center;
    gap: var(--emerald-spacing-xl, 28px);
}
.adm-faq__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-faq__eyebrow {
    padding: 2px 10px;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-primary-100, #e7fff2);
    color: var(--emerald-primary-700, #027d4c);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.adm-faq__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-faq__sub {
    max-width: 32rem;
    margin: 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-faq__finder-body {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xs, 8px);
    padding: var(--emerald-spacing-l, 20px);
}
.adm-faq__finder-field .emerald-text-field__label {
    font-weight: 700;
}
.adm-faq__finder-hint {
    margin: 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-faq__tabs-list {
    flex-wrap: wrap;
}
.adm-faq__caption {
    margin: 0 0 var(--emerald-spacing-s, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-faq__accordion {
    width: 100%;
}
.adm-faq__empty {
    margin: 0;
    padding: var(--emerald-spacing-xl, 28px) 0;
    color: var(--emerald-on-surface-variant, #757e85);
    text-align: center;
}

  /* Heading block beside the channels rather than centred above them. */
.adm-faq__help {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--emerald-spacing-xl, 28px);
    align-items: start;
    padding-top: var(--emerald-spacing-l, 20px);
    border-top: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-faq__help-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--emerald-spacing-xs, 8px);
    position: sticky;
    top: var(--emerald-spacing-l, 20px);
}
.adm-faq__help-title {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-faq__help-sub {
    margin: 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-faq__channels {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    background: var(--emerald-background, #fefefe);
}
.adm-faq__channel {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-m, 16px);
    padding: var(--emerald-spacing-l, 20px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-faq__channel:last-child {
    border-bottom: none;
}
.adm-faq__channel-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--emerald-radius-m, 8px);
    background: var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-faq__channel-text {
    flex: 1;
    min-width: 0;
}
.adm-faq__channel-text h3 {
    margin: 0;
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: 700;
}
.adm-faq__channel-text p {
    margin: 2px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-faq__channel .emerald-button {
    flex: none;
}
@media (max-width: 900px) {
.adm-faq__hero,
    .adm-faq__help {
      grid-template-columns: 1fr;
}
.adm-faq__help-intro {
      position: static;
}
.adm-faq__channel {
      flex-wrap: wrap;
}
.adm-faq__channel-text {
      flex-basis: 100%;
      order: 1;
}
.adm-faq__channel .emerald-button {
      order: 2;
      margin-inline-start: auto;
}
}

.eft {
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
    background: var(--ed-bg, var(--emerald-neutral-200, #f6f8fa));
}
.eft-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
    max-width: 1100px;
    margin: 0 auto;
}
.eft-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    padding: 8px 8px 24px;
    grid-column: 1;
}
.eft-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ed-text, var(--emerald-on-surface, #2b2d2e));
}
.eft-body {
    margin: 0;
    color: var(--ed-muted, var(--emerald-on-surface-variant, #757e85));
    font-size: 16px;
    line-height: 1.5;
}
.eft-cta {
    margin-top: 8px;
    color: var(--emerald-primary-700, #027d4c);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}
.eft-cta:hover {
    text-decoration: underline;
}
.eft-card.emerald-card {
    background: var(--ed-surface, var(--emerald-background, #fefefe));
    border: var(--emerald-stroke-s, 1px) solid var(--ed-border, var(--emerald-neutral-300, #ccd6e7));
    border-radius: var(--emerald-radius-xl, 12px);
    padding: var(--emerald-spacing-l, 20px);
    min-height: 200px;
}
.eft-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.eft-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--emerald-radius-m, 8px);
    background: var(--emerald-primary-100, #e7fff2);
    margin-bottom: 4px;
}
.eft-card__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
.eft-card__sub {
    font-size: 14px !important;
    line-height: 1.45 !important;
}
@media (max-width: 900px) {
.eft {
      padding-top: calc(3.5rem + env(safe-area-inset-top, 0px));
}
.eft-grid {
      grid-template-columns: 1fr;
}
.eft-intro {
      grid-column: auto;
}
}

.adm-finance {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
}

  /* EmCard variant="simple" ships 2px padding and its slots add none, so every
     card needs its own inset — see the EmCard padding gap row. */
.adm-finance .emerald-card {
    padding: var(--emerald-spacing-l, 20px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-finance__title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-finance__subtitle {
    margin: 0.25rem 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-finance__panel-title {
    font-size: var(--emerald-text-b1-size, 16px) !important;
    font-weight: 700 !important;
}
.adm-finance__panel-sub {
    margin: 2px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-finance__delta {
    font-style: normal;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    color: var(--emerald-danger-500, #c61424);
}
.adm-finance__delta[data-up] {
    color: var(--emerald-primary-700, #027d4c);
}
.adm-finance__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    align-items: start;
    gap: var(--emerald-spacing-m, 16px);
}
.adm-finance__main,
  .adm-finance__rail {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
    min-width: 0;
}

  /* .emerald-card__header is flex-direction: column — a title/action row has to
     opt back into row explicitly. */
.adm-finance__chart-head,
  .adm-finance__toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-finance__headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-finance__chart {
    display: flex;
    align-items: flex-end;
    gap: var(--emerald-spacing-s, 12px);
    height: 220px;
    margin-top: var(--emerald-spacing-xs, 8px);
}
.adm-finance__column {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 100%;
}
.adm-finance__stack {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    width: 60%;
    min-width: 18px;
    border-radius: var(--emerald-radius-xs, 4px);
    overflow: hidden;
}
.adm-finance__seg {
    display: block;
    background: var(--emerald-primary-800, #01603a);
}
.adm-finance__seg[data-tone='mid'] {
    background: var(--emerald-primary-500, #26c26d);
}
.adm-finance__seg[data-tone='pale'] {
    background: var(--emerald-primary-300, #baedd0);
}
.adm-finance__column-total {
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.adm-finance__column-label {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-finance__ytd {
    display: flex;
    flex-wrap: wrap;
    gap: var(--emerald-spacing-s, 12px) var(--emerald-spacing-l, 20px);
    margin: var(--emerald-spacing-m, 16px) 0 0;
    padding: 0;
    list-style: none;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-finance__ytd li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.adm-finance__ytd strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-finance__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--emerald-primary-800, #01603a);
}
.adm-finance__dot[data-tone='mid'] {
    background: var(--emerald-primary-500, #26c26d);
}
.adm-finance__dot[data-tone='pale'] {
    background: var(--emerald-primary-300, #baedd0);
}
.adm-finance__filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-finance__search {
    width: 180px;
}
.adm-finance__select {
    width: 124px;
}
.adm-finance__table-wrap {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--emerald-spacing-l, 20px));
}
.adm-finance__table th:first-child,
  .adm-finance__table td:first-child {
    padding-left: var(--emerald-spacing-l, 20px);
}
.adm-finance__table th:last-child,
  .adm-finance__table td:last-child {
    padding-right: var(--emerald-spacing-l, 20px);
}
.adm-finance__table tbody tr {
    transition: background-color 120ms ease;
}
.adm-finance__table tbody tr:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-finance__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--emerald-text-b2-size, 14px);
    white-space: nowrap;
}
.adm-finance__table th {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    text-align: left;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-finance__table td {
    padding: var(--emerald-spacing-s, 12px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-finance__client {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-finance__client strong {
    display: block;
}
.adm-finance__client-sub {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-finance__table-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-finance__table-count {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-finance__page-gap {
    padding: 0 var(--emerald-spacing-2xs, 4px);
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-finance__runway {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.adm-finance__runway small {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: 600;
    letter-spacing: 0;
}
.adm-finance__meter {
    height: 12px;
    margin: var(--emerald-spacing-s, 12px) 0;
    border-radius: 6px;
    background: var(--emerald-primary-100, #e7fff2);
    overflow: hidden;
}
.adm-finance__meter span {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: var(--emerald-primary-600, #1fae60);
}
.adm-finance__runway-facts {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xs, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-finance__runway-facts li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-finance__runway-facts strong {
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-finance__cta {
    width: 100%;
    margin-top: var(--emerald-spacing-m, 16px);
}
.adm-finance__bars {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-s, 12px);
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-finance__bars li {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-finance__bar-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-finance__bar-text strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-finance__bar-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.adm-finance__bar-track {
    display: block;
    width: 76px;
    height: 5px;
    border-radius: 3px;
    background: var(--emerald-neutral-200, #f6f8fa);
    overflow: hidden;
}
.adm-finance__bar-track span {
    display: block;
    height: 100%;
    background: var(--emerald-primary-600, #1fae60);
}
@media (max-width: 1200px) {
.adm-finance__layout {
      grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.adm-finance__search,
    .adm-finance__select {
      width: 100%;
}
.adm-finance__chart {
      gap: 6px;
      height: 180px;
}
.adm-finance__column-total {
      font-size: 10px;
}
}

.adm-forms {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
}

  /* variant="simple" ships a 2px card inset; these pages need real gutters. */
.adm-forms .emerald-card__header {
    padding: var(--emerald-spacing-l, 20px) var(--emerald-spacing-l, 20px) 0;
}
.adm-forms .emerald-card {
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-forms__title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-forms__sub {
    margin: 4px 0 0;
    max-width: 52rem;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-forms__sub code,
  .adm-forms__panel-sub code {
    padding: 1px 5px;
    border-radius: var(--emerald-radius-xs, 4px);
    background: var(--emerald-neutral-200, #f6f8fa);
    font-size: 0.9em;
}
.adm-forms__panel-sub {
    margin: 4px 0 0;
    max-width: 56rem;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}

  /* Reserve the error line on every field so validating a value never reflows
     the layout around it. */
.adm-forms .emerald-text-field__error,
  .adm-forms .emerald-textarea__error {
    min-height: var(--emerald-text-b3-height, 18px);
}
.adm-forms .emerald-text-field__error[data-state='hidden'],
  .adm-forms .emerald-textarea__error[data-state='hidden'] {
    display: block;
    visibility: hidden;
}
.adm-forms__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--emerald-spacing-s, 12px);
    padding: var(--emerald-spacing-l, 20px);
    border-top: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-forms__status {
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-forms__status[data-state='valid'] {
    color: var(--emerald-primary-700, #027d4c);
}
.adm-forms__status[data-state='invalid'] {
    color: var(--emerald-danger-600, #a1000e);
}
.adm-forms__sections {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

  /* Section heading in a left rail, fields in a single column beside it —
     the form reads as a sequence of labelled bands rather than a field grid. */
.adm-forms__section {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--emerald-spacing-xl, 28px);
    padding: var(--emerald-spacing-l, 20px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-forms__section:last-child {
    border-bottom: none;
}
.adm-forms__section-lede {
    position: sticky;
    top: var(--emerald-spacing-l, 20px);
    align-self: start;
}
.adm-forms__section-title {
    margin: 0;
    font-size: var(--emerald-text-b1-size, 16px);
    font-weight: 700;
}
.adm-forms__section-sub {
    margin: 4px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-forms__fields {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
    min-width: 0;
}
.adm-forms__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
}
.adm-forms__group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-forms__group-label {
    font-weight: 700;
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-forms__group-sub {
    margin: -4px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-forms__checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--emerald-spacing-xs, 8px);
    width: 100%;
}
.adm-forms__switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--emerald-spacing-m, 16px);
    width: 100%;
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-forms__switch-row small {
    display: block;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-forms__plans {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--emerald-spacing-s, 12px);
    width: 100%;
}
.adm-forms__plan {
    display: flex;
    align-items: flex-start;
    gap: var(--emerald-spacing-xs, 8px);
    padding: var(--emerald-spacing-s, 12px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-m, 8px);
    cursor: pointer;
}
.adm-forms__plan[data-selected] {
    border-color: var(--emerald-primary-600, #1fae60);
    background: var(--emerald-primary-100, #e7fff2);
}
.adm-forms__plan strong {
    display: block;
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-forms__plan small {
    display: block;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}

  /* Four numbered stages on one rail — the connector is drawn on the marker
     row so it survives wrapping at narrow widths. */
.adm-forms__timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
    padding: var(--emerald-spacing-l, 20px);
}
.adm-forms__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xs, 8px);
    padding-top: var(--emerald-spacing-m, 16px);
}

  /* Runs from this marker's centre to where the next column begins, so the
     rail is exact at any column count and never overflows the card. */
.adm-forms__stage::before {
    content: '';
    position: absolute;
    top: calc(var(--emerald-spacing-m, 16px) + 13px);
    inset-inline-start: 14px;
    inset-inline-end: calc(-1 * var(--emerald-spacing-m, 16px));
    height: 2px;
    background: var(--emerald-neutral-300, #ccd6e7);
}
.adm-forms__stage:last-child::before {
    display: none;
}
.adm-forms__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--emerald-radius-full, 999px);
    background: var(--emerald-primary-100, #e7fff2);
    color: var(--emerald-primary-700, #027d4c);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 800;
}
.adm-forms__stage-sig {
    padding: 2px 8px;
    align-self: flex-start;
    border-radius: var(--emerald-radius-xs, 4px);
    background: var(--emerald-neutral-200, #f6f8fa);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 700;
}

  /* Reserved lines keep the four demo inputs on a shared baseline even though
     the copy above them wraps to different lengths. */
.adm-forms__stage-fires {
    margin: 0;
    min-height: calc(3 * var(--emerald-text-b3-height, 18px));
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-forms__stage-reach {
    margin: 0;
    min-height: calc(3 * var(--emerald-text-b3-height, 18px));
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-forms__stage .adm-forms__actions {
    margin-top: auto;
    padding: 0;
    border-top: none;
}

  /* Two columns per entry: the rule on the left, a field proving it on the
     right, stacked as a reference list rather than a form. */
.adm-forms__glossary {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}
.adm-forms__entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    align-items: start;
    gap: var(--emerald-spacing-l, 20px);
    padding: var(--emerald-spacing-m, 16px) var(--emerald-spacing-l, 20px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-forms__entry:last-child {
    border-bottom: none;
}
.adm-forms__entry-sig {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--emerald-radius-xs, 4px);
    background: var(--emerald-neutral-200, #f6f8fa);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 700;
}
.adm-forms__entry-desc {
    margin: 6px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}

  /* Two per row means the rail would point at the row below, not the next
     stage — drop it and let the numbers carry the order. */
@media (max-width: 1000px) {
.adm-forms__timeline {
      grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adm-forms__stage::before {
      display: none;
}
}
@media (max-width: 900px) {
.adm-forms__section,
    .adm-forms__entry,
    .adm-forms__pair,
    .adm-forms__checks,
    .adm-forms__plans {
      grid-template-columns: 1fr;
}
.adm-forms__section-lede {
      position: static;
}
.adm-forms__timeline {
      grid-template-columns: 1fr;
}

    /* Stacked stages have nothing to line up against. */
.adm-forms__stage-fires,
    .adm-forms__stage-reach {
      min-height: 0;
}
}

.adm-kanban {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
    height: calc(100vh - 140px);
    min-height: 560px;
}
.adm-kanban__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--emerald-spacing-m, 16px);
}
.adm-kanban__title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-kanban__subtitle {
    margin: 0.25rem 0 0;
    max-width: 62ch;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-kanban__actions {
    flex: none;
    display: flex;
    align-items: stretch;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-kanban__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-l, 10px);
    background: var(--emerald-background, #fefefe);
}
.adm-kanban__meta-count {
    font-size: var(--emerald-text-h4-size, 20px);
    font-weight: 700;
    line-height: 1.1;
}
.adm-kanban__meta-label {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.adm-kanban__meta-last {
    margin-top: 2px;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 11px;
}
.adm-kanban__add {
    align-self: center;
    gap: var(--emerald-spacing-2xs, 4px);
}

  /* Title leads, the reference leads with the priority pill. */
.adm-kanban__card-title {
    margin: 0;
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: 600;
    line-height: 1.4;
}
.adm-kanban__card-meta {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-kanban__card-ref {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    letter-spacing: 0.02em;
}
.adm-kanban__card-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

  /* Assignee left, priority right — the pill moves off the card's top edge. */
.adm-kanban__card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--emerald-spacing-xs, 8px);
    padding-top: var(--emerald-spacing-xs, 8px);
    border-top: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
@media (max-width: 720px) {
.adm-kanban__header {
      flex-direction: column;
      align-items: stretch;
}
.adm-kanban__actions {
      justify-content: space-between;
}
.adm-kanban__meta {
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--emerald-spacing-xs, 8px);
}
}

.emerald-sink {
    min-height: 100vh;
    padding: 2rem clamp(1rem, 4vw, 3rem) 4rem;
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    background: var(--emerald-background, #fefefe);
    color: var(--emerald-on-background, #2b2d2e);
    overflow-x: clip;
}
@media (max-width: 720px) {
.emerald-sink {
      padding: 1.25rem 1rem 3rem;
}
.emerald-sink .row {
      max-width: 100%;
}
}
.sink-header {
    margin-bottom: 2rem;
}
.sink-header h1 {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
}
.sink-header p {
    margin: 0;
    color: var(--emerald-on-surface-variant, #757e85);
}
.sink-header a {
    color: var(--emerald-primary-700, #027d4c);
    font-weight: 600;
    text-decoration: none;
}
.sink-header a:hover {
    text-decoration: underline;
}
.emerald-sink section {
    margin-bottom: 2.5rem;
}
.emerald-sink section h2 {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
}
.emerald-sink .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.emerald-sink .stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}
.emerald-sink .stack.narrow {
    max-width: 360px;
}
.emerald-sink .muted {
    margin: 0;
    font-size: 0.875rem;
    color: var(--emerald-on-surface-variant, #757e85);
}
.dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.popover-heading {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--emerald-on-surface-variant, #757e85);
}
.popover-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 260px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.popover-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--emerald-radius-s, 6px);
}
.popover-list li:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.popover-list__title {
    font-size: 0.875rem;
    color: var(--emerald-on-surface, #2b2d2e);
}
.popover-list__meta {
    flex: none;
    font-size: 0.75rem;
    color: var(--emerald-on-surface-variant, #757e85);
}
.sink-calendar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 1rem;
    align-items: start;
    margin-bottom: 0.75rem;
}
@media (max-width: 720px) {
.sink-calendar {
      grid-template-columns: minmax(0, 1fr);
}
.sink-calendar__mini {
      display: none;
}
}
.sink-list {
    max-width: 440px;
    margin-bottom: 0.75rem;
}
.dialog-head .emerald-dialog__title {
    flex: 1;
}

.adm-logistics {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
}

  /* EmCard variant="simple" ships 2px padding and its slots add none, so every
     card needs its own inset — see the EmCard padding gap row. */
.adm-logistics .emerald-card {
    padding: var(--emerald-spacing-l, 20px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-logistics__title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-logistics__subtitle {
    margin: 0.25rem 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-logistics__panel-title {
    font-size: var(--emerald-text-b1-size, 16px) !important;
    font-weight: 700 !important;
}
.adm-logistics__panel-sub {
    margin: 2px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}

  /* .emerald-card__header is flex-direction: column — a title/action row has to
     opt back into row explicitly. */
.adm-logistics__train-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-logistics__train {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin: var(--emerald-spacing-m, 16px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-logistics__train li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 26px;
}

  /* Rail between stops; the final stop terminates the line. */
.adm-logistics__train li::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 7px;
    width: 100%;
    height: 2px;
    background: var(--emerald-neutral-300, #ccd6e7);
}
.adm-logistics__train li:last-child::before {
    display: none;
}
.adm-logistics__train li[data-state='done']::before {
    background: var(--emerald-primary-600, #1fae60);
}
.adm-logistics__stop {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border: 3px solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: 50%;
    background: var(--emerald-background, #fefefe);
}
.adm-logistics__train li[data-state='done'] .adm-logistics__stop {
    border-color: var(--emerald-primary-600, #1fae60);
    background: var(--emerald-primary-600, #1fae60);
}
.adm-logistics__train li[data-state='active'] .adm-logistics__stop {
    border-color: var(--emerald-primary-600, #1fae60);
    box-shadow: 0 0 0 4px var(--emerald-primary-100, #e7fff2);
}
.adm-logistics__stop-version {
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-logistics__stop-date {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-logistics__stop-note {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-logistics__train li[data-state='active'] .adm-logistics__stop-note {
    color: var(--emerald-primary-700, #027d4c);
    font-weight: 600;
}
.adm-logistics__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
}
.adm-logistics__stat-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.adm-logistics__stat-label {
    font-weight: 600;
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-logistics__stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-logistics__stat-note {
    margin-bottom: var(--emerald-spacing-xs, 8px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-logistics__pair {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--emerald-spacing-m, 16px);
}
.adm-logistics__pair .emerald-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.adm-logistics__regions {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--emerald-spacing-m, 16px);
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-logistics__regions li {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr) 104px;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-logistics__region-name {
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: 600;
}
.adm-logistics__region-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.adm-logistics__region-bar {
    height: 7px;
    min-width: 6px;
    border-radius: 4px;
    background: var(--emerald-primary-600, #1fae60);
}
.adm-logistics__region-bar[data-tone='p95'] {
    background: var(--emerald-primary-300, #baedd0);
}
.adm-logistics__region-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-logistics__region-value strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-logistics__legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--emerald-spacing-m, 16px) 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-logistics__dot {
    width: 10px;
    height: 10px;
    margin-left: var(--emerald-spacing-s, 12px);
    border-radius: 3px;
    background: var(--emerald-primary-600, #1fae60);
}
.adm-logistics__dot:first-child {
    margin-left: 0;
}
.adm-logistics__dot[data-tone='p95'] {
    background: var(--emerald-primary-300, #baedd0);
}
.adm-logistics__pipeline {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
    margin-top: var(--emerald-spacing-m, 16px);
}
.adm-logistics__pipeline-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-logistics__table-wrap {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--emerald-spacing-l, 20px));
}
.adm-logistics__table th:first-child,
  .adm-logistics__table td:first-child {
    padding-left: var(--emerald-spacing-l, 20px);
}
.adm-logistics__table th:last-child,
  .adm-logistics__table td:last-child {
    padding-right: var(--emerald-spacing-l, 20px);
}
.adm-logistics__table tbody tr {
    transition: background-color 120ms ease;
}
.adm-logistics__table tbody tr:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-logistics__table-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-logistics__table-count {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-logistics__page-gap {
    padding: 0 var(--emerald-spacing-2xs, 4px);
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-logistics__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--emerald-text-b2-size, 14px);
    white-space: nowrap;
}
.adm-logistics__table th {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    text-align: left;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-logistics__table td {
    padding: var(--emerald-spacing-s, 12px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-logistics__pkg {
    font-weight: 600;
}
.adm-logistics__progress-cell {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    min-width: 150px;
}
.adm-logistics__progress-cell .emerald-progress {
    flex: 1;
}
@media (max-width: 1200px) {
.adm-logistics__stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adm-logistics__pair {
      grid-template-columns: 1fr;
}
}
@media (max-width: 860px) {
.adm-logistics__train {
      grid-auto-flow: row;
      gap: var(--emerald-spacing-s, 12px);
}
.adm-logistics__train li {
      display: grid;
      grid-template-columns: 60px 70px minmax(0, 1fr);
      align-items: center;
      padding-top: 0;
      padding-left: 26px;
}

    /* Stacked stops swap the rail from horizontal to vertical. */
.adm-logistics__train li::before {
      top: 50%;
      left: 6px;
      width: 2px;
      height: 100%;
}
.adm-logistics__stop {
      top: 50%;
      margin-top: -7px;
}
}
@media (max-width: 640px) {
.adm-logistics__stats {
      grid-template-columns: 1fr;
}
.adm-logistics__regions li {
      grid-template-columns: 80px minmax(0, 1fr) 92px;
}
}

.adm-mail {
    display: grid;
    grid-template-columns: 208px minmax(0, 340px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--emerald-spacing-m, 16px);
    height: calc(100vh - 140px);
    min-height: 560px;
}

  /* The toolbar spans every pane: the folder heading, the one search that scopes
     the list, and Compose all read as a single row of chrome. */
.adm-mail__bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-m, 16px);
    padding: var(--emerald-spacing-s, 12px) var(--emerald-spacing-m, 16px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-mail__bar-title {
    display: flex;
    flex-direction: column;
    min-width: 148px;
}
.adm-mail__bar-title h1 {
    margin: 0;
    font-size: var(--emerald-text-h4-size, 20px);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.adm-mail__count {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-mail__search {
    flex: 1;
    min-width: 0;
}
.adm-mail__compose {
    flex: none;
}
.adm-mail__folders,
  .adm-mail__list-pane,
  .adm-mail__reading {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-mail__folders {
    gap: var(--emerald-spacing-xs, 8px);
    padding: var(--emerald-spacing-s, 12px);
    overflow-y: auto;
}
.adm-mail__nav-label {
    margin: var(--emerald-spacing-s, 12px) 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.adm-mail__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

  /* Count leads, label follows — the mirror of the reference rail. */
.adm-mail__folder {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
    width: 100%;
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-xs, 8px);
    border: none;
    border-radius: var(--emerald-radius-m, 8px);
    background: transparent;
    color: var(--emerald-on-surface, #2b2d2e);
    font: inherit;
    font-size: var(--emerald-text-b2-size, 14px);
    text-align: left;
    cursor: pointer;
}
.adm-mail__folder:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-mail__folder:focus-visible {
    outline: var(--emerald-stroke-m, 2px) solid var(--emerald-primary-600, #1fae60);
    outline-offset: -2px;
}
.adm-mail__folder[data-active] {
    background: var(--emerald-primary-100, #e7fff2);
    color: var(--emerald-primary-700, #027d4c);
    font-weight: 600;
}
.adm-mail__folder-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--emerald-radius-s, 6px);
    background: var(--emerald-primary-600, #1fae60);
    color: var(--emerald-on-primary, #fff);
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
}
.adm-mail__folder-badge--quiet {
    background: var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-on-surface-variant, #757e85);
    font-weight: 600;
}
.adm-mail__folder[data-active] .adm-mail__folder-badge--quiet {
    background: var(--emerald-background, #fefefe);
}

  /* Tags wrap as chips instead of stacking as a second nav list. */
.adm-mail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.adm-mail__tags em {
    font-style: normal;
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-mail__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--emerald-primary-600, #1fae60);
}
.adm-mail__dot[data-tone='Sponsors'] { background: var(--emerald-secondary-600, #00b4dc);
}
.adm-mail__dot[data-tone='Support'] { background: var(--emerald-danger-500, #c61424);
}
.adm-mail__dot[data-tone='RFC'] { background: var(--emerald-info-500, #3a70e2);
}
.adm-mail__dot[data-tone='Community'] { background: var(--emerald-alert-600, #d9af00);
}
.adm-mail__list-pane {
    padding: var(--emerald-spacing-xs, 8px);
}
.adm-mail__list-pane .emerald-list {
    flex: 1;
    min-height: 0;
    gap: 2px;
    overflow-y: auto;
}

  /* Three-line rows top-align their avatar against the subject. */
.adm-mail__message {
    align-items: flex-start;
    gap: var(--emerald-spacing-xs, 8px);
    padding: var(--emerald-spacing-s, 12px) var(--emerald-spacing-xs, 8px);
}

  /* Unread reads as a leading rail rather than a trailing dot. */
.adm-mail__message::before {
    content: '';
    flex: none;
    align-self: stretch;
    width: 3px;
    border-radius: 999px;
    background: transparent;
}
.adm-mail__message[data-unread]::before {
    background: var(--emerald-primary-600, #1fae60);
}

  /* Subject leads the row; the sender drops to the meta line under it. */
.adm-mail__message .emerald-list__content {
    gap: 3px;
}
.adm-mail__message .emerald-list__meta {
    align-self: flex-start;
}
.adm-mail__message-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.adm-mail__message-sender {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adm-mail__message-tag {
    flex: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    font-weight: 600;
}
.adm-mail__message-preview {
    overflow: hidden;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adm-mail__empty {
    padding: var(--emerald-spacing-m, 16px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
    text-align: center;
}
.adm-mail__reading {
    padding: var(--emerald-spacing-l, 20px);
    gap: var(--emerald-spacing-m, 16px);
    overflow-y: auto;
}
.adm-mail__reading > .adm-mail__back {
    display: none;
    align-self: flex-start;
}

  /* Sender identity leads, subject sits under it — the reference stacks the
     subject first with the avatar pushed to the far edge. */
.adm-mail__reading-head {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-s, 12px);
    padding-bottom: var(--emerald-spacing-m, 16px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-mail__reading-from {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-mail__reading-who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-mail__reading-handle,
  .adm-mail__reading-time {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-mail__reading-head h2 {
    margin: 0;
    font-size: var(--emerald-text-h4-size, 20px);
    letter-spacing: -0.01em;
}
.adm-mail__reading-chips {
    display: flex;
    gap: 6px;
}
.adm-mail__reading-body {
    margin: 0;
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
    line-height: 1.65;
    white-space: pre-line;
}

  /* Composer is one bordered block with its own footer, not a loose field
     with a right-aligned button. */
.adm-mail__reply {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xs, 8px);
    margin-top: auto;
    padding: var(--emerald-spacing-s, 12px);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-l, 10px);
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-mail__reply-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-mail__reply-hint {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-mail__reading-empty {
    margin: auto;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-mail__dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

  /* Below the three-pane breakpoint the reading pane becomes a detail view the
     message list pushes onto, so a tap always leads somewhere. */
@media (max-width: 1100px) {
.adm-mail {
      grid-template-columns: 180px minmax(0, 1fr);
      height: auto;
}
.adm-mail__reading {
      display: none;
}
.adm-mail[data-detail] {
      grid-template-columns: minmax(0, 1fr);
}
.adm-mail[data-detail] .adm-mail__bar,
    .adm-mail[data-detail] .adm-mail__folders,
    .adm-mail[data-detail] .adm-mail__list-pane {
      display: none;
}
.adm-mail[data-detail] .adm-mail__reading {
      display: flex;
      min-height: 60vh;
}
.adm-mail[data-detail] .adm-mail__reading > .adm-mail__back {
      display: inline-flex;
}
}
@media (max-width: 720px) {
.adm-mail {
      grid-template-columns: minmax(0, 1fr);
}
.adm-mail__bar {
      flex-wrap: wrap;
      gap: var(--emerald-spacing-xs, 8px);
}
.adm-mail__bar-title {
      flex: 1 0 auto;
}
.adm-mail__search {
      flex: 1 0 100%;
      order: 3;
}
.adm-mail__folders {
      flex-direction: row;
      align-items: center;
      gap: var(--emerald-spacing-xs, 8px);
      overflow-x: auto;
      overscroll-behavior-x: contain;
}
.adm-mail__folders .adm-mail__nav-label,
    .adm-mail__tags {
      display: none;
}
.adm-mail__list {
      flex-direction: row;
      gap: 4px;
}
.adm-mail__folder {
      width: auto;
      gap: 6px;
      white-space: nowrap;
}
}

.em {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--ed-bg, #f6f8fa);
}
.em-scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 32, 0.18);
    pointer-events: none;
}
.em-toolbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px clamp(1.25rem, 4vw, 3rem);
}
.em-hint {
    margin: 0;
    color: var(--ed-muted, #757e85);
    font-size: 14px;
}
.em-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.em-options {
    margin: 8px 0 4px;
}

.adm-orders {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
}

  /* EmCard variant="simple" ships 2px padding and its slots add none, so every
     card needs its own inset — see the EmCard padding gap row. */
.adm-orders .emerald-card {
    padding: var(--emerald-spacing-l, 20px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-orders__title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-orders__subtitle {
    margin: 0.25rem 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-orders__panel-title {
    font-size: var(--emerald-text-b1-size, 16px) !important;
    font-weight: 700 !important;
}
.adm-orders__panel-sub {
    margin: 2px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-orders__delta {
    font-style: normal;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    color: var(--emerald-danger-500, #c61424);
}
.adm-orders__delta[data-up] {
    color: var(--emerald-primary-700, #027d4c);
}

  /* .emerald-card__header is flex-direction: column — a title/action row has to
     opt back into row explicitly. */
.adm-orders__table-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-orders__search {
    width: 280px;
}
.adm-orders__table-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-orders__table-count {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-orders__page-gap {
    padding: 0 var(--emerald-spacing-2xs, 4px);
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-orders__table-wrap {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--emerald-spacing-l, 20px));
}
.adm-orders__table th:first-child,
  .adm-orders__table td:first-child {
    padding-left: var(--emerald-spacing-l, 20px);
}
.adm-orders__table th:last-child,
  .adm-orders__table td:last-child {
    padding-right: var(--emerald-spacing-l, 20px);
}
.adm-orders__table tbody tr {
    transition: background-color 120ms ease;
}
.adm-orders__table tbody tr:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-orders__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--emerald-text-b2-size, 14px);
    white-space: nowrap;
}
.adm-orders__table th {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    text-align: left;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-orders__table td {
    padding: var(--emerald-spacing-s, 12px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-orders__id {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.adm-orders__client {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-orders__client strong {
    display: block;
}
.adm-orders__client-sub {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-orders__split {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
    gap: var(--emerald-spacing-m, 16px);
}
.adm-orders__split .emerald-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.adm-orders__funnel {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--emerald-spacing-m, 16px);
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-orders__funnel li {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 42px;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-orders__funnel-label {
    font-size: var(--emerald-text-b2-size, 14px);
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-orders__funnel-track {
    height: 26px;
    border-radius: var(--emerald-radius-xs, 4px);
    background: var(--emerald-neutral-200, #f6f8fa);
    overflow: hidden;
}
.adm-orders__funnel-fill {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    padding-right: var(--emerald-spacing-xs, 8px);
    border-radius: var(--emerald-radius-xs, 4px);
    background: var(--emerald-primary-600, #1fae60);
    color: var(--emerald-on-primary, #fff);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.adm-orders__funnel-pct {
    font-size: var(--emerald-text-b3-size, 12px);
    text-align: right;
}
.adm-orders__accounts {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--emerald-spacing-m, 16px);
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-orders__accounts li {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-orders__account-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: var(--emerald-text-b3-size, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-orders__account-text strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-orders__account-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.adm-orders__account-bar {
    display: block;
    width: 80px;
    height: 5px;
    border-radius: 3px;
    background: var(--emerald-neutral-200, #f6f8fa);
    overflow: hidden;
}
.adm-orders__account-bar span {
    display: block;
    height: 100%;
    background: var(--emerald-primary-600, #1fae60);
}
.adm-orders__goal {
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
    text-align: center;
}
.adm-orders__ring {
    --pct: 74;
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    margin-top: var(--emerald-spacing-xs, 8px);
    border-radius: 50%;
    background: conic-gradient(var(--emerald-primary-600, #1fae60) calc(var(--pct) * 1%), var(--emerald-neutral-200, #f6f8fa) 0);
}
.adm-orders__ring::before {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: var(--emerald-background, #fefefe);
}
.adm-orders__ring-value,
  .adm-orders__ring-sub {
    position: relative;
    z-index: 1;
}
.adm-orders__ring-value {
    font-size: 1.5rem;
    font-weight: 700;
}
.adm-orders__ring-sub {
    font-size: var(--emerald-text-b3-size, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-orders__strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
}
.adm-orders__strip-body {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xs, 8px);
    min-height: 108px;
}
.adm-orders__strip-label {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-orders__strip-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.625rem;
    font-weight: 700;
}
.adm-orders__spark {
    width: 100%;
    height: 34px;
    margin-top: auto;
}
@media (max-width: 1200px) {
.adm-orders__split {
      grid-template-columns: 1fr;
}
.adm-orders__strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.adm-orders__search {
      width: 100%;
}
.adm-orders__strip {
      grid-template-columns: 1fr;
}
.adm-orders__funnel li {
      grid-template-columns: 100px minmax(0, 1fr) 38px;
}
}

.adm-payments {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
}

  /* EmCard variant="simple" ships 2px padding and its slots add none, so every
     card needs its own inset — see the EmCard padding gap row. */
.adm-payments .emerald-card {
    padding: var(--emerald-spacing-l, 20px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-payments__title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-payments__subtitle {
    margin: 0.25rem 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-payments__panel-title {
    font-size: var(--emerald-text-b1-size, 16px) !important;
    font-weight: 700 !important;
}
.adm-payments__panel-sub {
    margin: 2px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-payments__delta {
    font-style: normal;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    color: var(--emerald-danger-500, #c61424);
}
.adm-payments__delta[data-up] {
    color: var(--emerald-primary-700, #027d4c);
}
.adm-payments__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
    margin-top: var(--emerald-spacing-xs, 8px);
}
.adm-payments__summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: var(--emerald-spacing-m, 16px);
    border-left: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-payments__summary > div:first-child {
    padding-left: 0;
    border-left: 0;
}
.adm-payments__summary-label {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-payments__summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-payments__segbar {
    display: flex;
    height: 40px;
    margin-top: var(--emerald-spacing-l, 20px);
    border-radius: var(--emerald-radius-m, 8px);
    overflow: hidden;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.adm-payments__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--emerald-primary-800, #01603a);
    color: var(--emerald-on-primary, #fff);
}
.adm-payments__seg[data-tone='mid'] {
    background: var(--emerald-primary-600, #1fae60);
}
.adm-payments__seg[data-tone='light'] {
    background: var(--emerald-primary-500, #26c26d);
}
.adm-payments__seg[data-tone='pale'] {
    background: var(--emerald-primary-300, #baedd0);
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-payments__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--emerald-spacing-s, 12px) var(--emerald-spacing-l, 20px);
    margin: var(--emerald-spacing-s, 12px) 0 0;
    padding: 0;
    list-style: none;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-payments__legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.adm-payments__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--emerald-primary-800, #01603a);
}
.adm-payments__dot[data-tone='mid'] {
    background: var(--emerald-primary-600, #1fae60);
}
.adm-payments__dot[data-tone='light'] {
    background: var(--emerald-primary-500, #26c26d);
}
.adm-payments__dot[data-tone='pale'] {
    background: var(--emerald-primary-300, #baedd0);
}

  /* .emerald-card__header is flex-direction: column — a title/action row has to
     opt back into row explicitly. */
.adm-payments__toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-payments__toolbar-left,
  .adm-payments__toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-payments__toolbar-label {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-payments__show-select {
    width: 76px;
}
.adm-payments__search {
    width: 240px;
}
.adm-payments__status-select {
    width: 120px;
}
.adm-payments__table-wrap {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--emerald-spacing-l, 20px));
}
.adm-payments__table th:first-child,
  .adm-payments__table td:first-child,
  .adm-payments__mini-table th:first-child,
  .adm-payments__mini-table td:first-child {
    padding-left: var(--emerald-spacing-l, 20px);
}
.adm-payments__table th:last-child,
  .adm-payments__table td:last-child,
  .adm-payments__mini-table th:last-child,
  .adm-payments__mini-table td:last-child {
    padding-right: var(--emerald-spacing-l, 20px);
}
.adm-payments__table tbody tr,
  .adm-payments__mini-table tbody tr {
    transition: background-color 120ms ease;
}
.adm-payments__table tbody tr:hover,
  .adm-payments__mini-table tbody tr:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-payments__page-gap {
    padding: 0 var(--emerald-spacing-2xs, 4px);
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-payments__table,
  .adm-payments__mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--emerald-text-b2-size, 14px);
    white-space: nowrap;
}
.adm-payments__table th,
  .adm-payments__mini-table th {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    text-align: left;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-payments__table td,
  .adm-payments__mini-table td {
    padding: var(--emerald-spacing-s, 12px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-payments__mini-table td strong {
    display: block;
}
.adm-payments__mini-table td span {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-payments__client {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-payments__client strong {
    display: block;
}
.adm-payments__client-role {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-payments__actions {
    display: flex;
    gap: 2px;
}
.adm-payments__actions .emerald-button {
    width: 30px;
    height: 30px;
    padding: 0;
}
.adm-payments__table-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-payments__table-count {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-payments__trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
}
.adm-payments__trio .emerald-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.adm-payments__methods,
  .adm-payments__payouts,
  .adm-payments__failures {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--emerald-spacing-m, 16px);
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-payments__methods li,
  .adm-payments__payouts li,
  .adm-payments__failures li {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-payments__method-text,
  .adm-payments__payout-text,
  .adm-payments__failure-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-payments__method-text strong,
  .adm-payments__payout-text strong,
  .adm-payments__failure-text strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-payments__method-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.adm-payments__method-bar {
    display: block;
    width: 72px;
    height: 5px;
    border-radius: 3px;
    background: var(--emerald-neutral-200, #f6f8fa);
    overflow: hidden;
}
.adm-payments__method-bar span {
    display: block;
    height: 100%;
    background: var(--emerald-primary-600, #1fae60);
}
.adm-payments__payout-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-payments__payout-value strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-payments__failure-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: var(--emerald-text-b2-size, 14px);
}
@media (max-width: 1200px) {
.adm-payments__summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adm-payments__summary > div:nth-child(3) {
      padding-left: 0;
      border-left: 0;
}
.adm-payments__trio {
      grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.adm-payments__summary {
      grid-template-columns: 1fr;
}
.adm-payments__summary > div {
      padding-left: 0;
      border-left: 0;
}
.adm-payments__search {
      width: 100%;
}
}

.adm-plans {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
}
.adm-plans .emerald-card {
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}

  /* Left-aligned header with the billing control on the far end, rather than a
     centred stack with the toggle underneath it. */
.adm-plans__head {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-m, 16px);
    padding-bottom: var(--emerald-spacing-xs, 8px);
}
.adm-plans__eyebrow {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.adm-plans__title {
    margin: 4px 0 0;
    max-width: 26ch;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-plans__sub {
    max-width: 40rem;
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-plans__billing {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}

  /* Wide rows instead of three portrait cards — the price sits at the end of a
     sentence about the tier rather than on top of a feature list. */
.adm-plans__list {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.adm-plans__tier-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 15rem);
    align-items: center;
    gap: var(--emerald-spacing-l, 20px);
    padding: var(--emerald-spacing-l, 20px);
}
.adm-plans .adm-plans__tier--featured {
    border-color: var(--emerald-primary-600, #1fae60);
    box-shadow: var(--emerald-shadow-m, 0 2px 8px 0 rgba(51, 51, 51, 0.12));
}
.adm-plans__tier--featured .adm-plans__tier-body {
    border-inline-start: 4px solid var(--emerald-primary-600, #1fae60);
    border-start-start-radius: var(--emerald-radius-xl, 12px);
    border-end-start-radius: var(--emerald-radius-xl, 12px);
}
.adm-plans__tier-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--emerald-spacing-xs, 8px);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-plans__tier-pitch {
    margin: 6px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-plans__highlights {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-plans__highlights li {
    display: flex;
    align-items: flex-start;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-plans__highlights svg {
    flex: none;
    margin-top: 4px;
    color: var(--emerald-primary-700, #027d4c);
}
.adm-plans__buy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.adm-plans__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
}
.adm-plans__amount {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.adm-plans__period {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}

  /* Always occupies a line so switching billing period never shifts the CTA. */
.adm-plans__note {
    min-height: var(--emerald-text-b3-height, 18px);
    margin-bottom: var(--emerald-spacing-xs, 8px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-plans__cta {
    width: 100%;
}
.adm-plans__table-wrap {
    overflow-x: auto;
    padding: 0;
}
.adm-plans__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-plans__table th,
  .adm-plans__table td {
    padding: var(--emerald-spacing-s, 12px) var(--emerald-spacing-l, 20px);
    text-align: center;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-plans__table thead th {
    position: sticky;
    top: 0;
    background: var(--emerald-background, #fefefe);
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: 700;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-plans__table tbody th[scope='row'] {
    min-width: 240px;
    font-weight: 400;
    text-align: left;
}
.adm-plans__table td {
    white-space: nowrap;
}

  /* One card, grouped bodies — each section announces itself in a banner row
     instead of getting its own card and icon. */
.adm-plans__group th {
    padding-top: var(--emerald-spacing-m, 16px);
    background: var(--emerald-neutral-200, #f6f8fa);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}
.adm-plans__table [data-featured] {
    background: var(--emerald-primary-100, #e7fff2);
}
.adm-plans__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--emerald-primary-100, #e7fff2);
    color: var(--emerald-primary-700, #027d4c);
}
.adm-plans__table [data-featured] .adm-plans__check {
    background: var(--emerald-background, #fefefe);
}
.adm-plans__check .emerald-icon {
    --emerald-icon-size: 14px;
    --emerald-icon-stroke: 3.75;
}
.adm-plans__dash {
    --emerald-icon-size: 14px;
    color: var(--emerald-neutral-400, #aeb6be);
}

  /* Bullet mark in the tier highlight list; colour and flow come from the
     .adm-plans__highlights svg rule above. */
.adm-plans__tick {
    --emerald-icon-size: 14px;
    --emerald-icon-stroke: 3.75;
}
.adm-plans__terms {
    max-width: 52rem;
    margin: 0;
    padding: var(--emerald-spacing-m, 16px);
    border-inline-start: 3px solid var(--emerald-neutral-300, #ccd6e7);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
@media (max-width: 1000px) {
.adm-plans__tier-body {
      grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
}
.adm-plans__highlights {
      grid-column: 1;
}
}
@media (max-width: 700px) {
.adm-plans__head {
      align-items: flex-start;
}
.adm-plans__tier-body {
      grid-template-columns: 1fr;
}
.adm-plans__buy {
      align-items: stretch;
}
}

.adm-productivity {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
}

  /* EmCard variant="simple" ships 2px padding and its slots add none, so every
     card needs its own inset — see the EmCard padding gap row. */
.adm-productivity .emerald-card {
    padding: var(--emerald-spacing-l, 20px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-productivity__title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-productivity__subtitle {
    margin: 0.25rem 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-productivity__panel-title {
    font-size: var(--emerald-text-b1-size, 16px) !important;
    font-weight: 700 !important;
}
.adm-productivity__panel-sub {
    margin: 2px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-productivity__delta {
    font-style: normal;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    color: var(--emerald-danger-500, #c61424);
}
.adm-productivity__delta[data-up] {
    color: var(--emerald-primary-700, #027d4c);
}
.adm-productivity__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: var(--emerald-spacing-m, 16px);
}

  /* .emerald-card__header is flex-direction: column — a title/action row has to
     opt back into row explicitly. */
.adm-productivity__heat-head,
  .adm-productivity__toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-productivity__heat-stats {
    display: flex;
    gap: var(--emerald-spacing-l, 20px);
}
.adm-productivity__heat-stats > div {
    display: flex;
    flex-direction: column;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-productivity__heat-stats strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: 1.25rem;
}
.adm-productivity__heat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--emerald-spacing-xs, 8px);
}
.adm-productivity__heat-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-productivity__heat-day {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-productivity__heat-cells {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 4px;
}
.adm-productivity__cell {
    height: 26px;
    border-radius: 3px;
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-productivity__cell[data-level='1'] {
    background: var(--emerald-primary-100, #e7fff2);
}
.adm-productivity__cell[data-level='2'] {
    background: var(--emerald-primary-300, #baedd0);
}
.adm-productivity__cell[data-level='3'] {
    background: var(--emerald-primary-500, #26c26d);
}
.adm-productivity__cell[data-level='4'] {
    background: var(--emerald-primary-800, #01603a);
}
.adm-productivity__heat-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: var(--emerald-spacing-s, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-productivity__heat-legend .adm-productivity__cell {
    width: 18px;
    height: 18px;
}
.adm-productivity__heat-legend > span:first-child {
    margin-right: 4px;
}
.adm-productivity__heat-legend > span:last-child {
    margin-left: 4px;
}
.adm-productivity__rotation {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-productivity__rotation li {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-productivity__rotation-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-productivity__rotation-text strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-productivity__trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
}
.adm-productivity__trio .emerald-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.adm-productivity__segbar {
    display: flex;
    height: 40px;
    margin-top: var(--emerald-spacing-xs, 8px);
    border-radius: var(--emerald-radius-m, 8px);
    overflow: hidden;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.adm-productivity__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--emerald-primary-800, #01603a);
    color: var(--emerald-on-primary, #fff);
}
.adm-productivity__seg[data-tone='mid'] {
    background: var(--emerald-primary-600, #1fae60);
}
.adm-productivity__seg[data-tone='light'] {
    background: var(--emerald-primary-500, #26c26d);
}
.adm-productivity__seg[data-tone='pale'] {
    background: var(--emerald-primary-300, #baedd0);
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-productivity__seg[data-tone='muted'] {
    background: var(--emerald-neutral-300, #ccd6e7);
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-productivity__legend {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-xs, 8px);
    margin: var(--emerald-spacing-m, 16px) 0 0;
    padding: 0;
    list-style: none;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-productivity__legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.adm-productivity__legend strong {
    margin-left: auto;
    color: var(--emerald-on-surface, #2b2d2e);
}
.adm-productivity__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--emerald-primary-800, #01603a);
}
.adm-productivity__dot[data-tone='mid'] {
    background: var(--emerald-primary-600, #1fae60);
}
.adm-productivity__dot[data-tone='light'] {
    background: var(--emerald-primary-500, #26c26d);
}
.adm-productivity__dot[data-tone='pale'] {
    background: var(--emerald-primary-300, #baedd0);
}
.adm-productivity__dot[data-tone='muted'] {
    background: var(--emerald-neutral-300, #ccd6e7);
}
.adm-productivity__stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: var(--emerald-spacing-xs, 8px);
    font-size: 1.75rem;
    font-weight: 700;
}
.adm-productivity__columns {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 90px;
    margin-top: auto;
    padding-top: var(--emerald-spacing-m, 16px);
}
.adm-productivity__column {
    flex: 1;
    min-height: 6px;
    border-radius: var(--emerald-radius-xs, 4px) var(--emerald-radius-xs, 4px) 0 0;
    background: var(--emerald-primary-300, #baedd0);
}
.adm-productivity__column[data-best] {
    background: var(--emerald-primary-600, #1fae60);
}
.adm-productivity__curve {
    width: 100%;
    height: 90px;
    margin-top: auto;
    padding-top: var(--emerald-spacing-m, 16px);
}
.adm-productivity__filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-productivity__search {
    width: 200px;
}
.adm-productivity__select {
    width: 140px;
}
.adm-productivity__table-wrap {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--emerald-spacing-l, 20px));
}
.adm-productivity__table th:first-child,
  .adm-productivity__table td:first-child {
    padding-left: var(--emerald-spacing-l, 20px);
}
.adm-productivity__table th:last-child,
  .adm-productivity__table td:last-child {
    padding-right: var(--emerald-spacing-l, 20px);
}
.adm-productivity__table tbody tr {
    transition: background-color 120ms ease;
}
.adm-productivity__table tbody tr:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-productivity__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--emerald-text-b2-size, 14px);
    white-space: nowrap;
}
.adm-productivity__table th {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    text-align: left;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-productivity__table td {
    padding: var(--emerald-spacing-s, 12px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-productivity__client {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-productivity__client strong {
    display: block;
}
.adm-productivity__client-sub {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-productivity__table-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-productivity__table-count {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-productivity__page-gap {
    padding: 0 var(--emerald-spacing-2xs, 4px);
    color: var(--emerald-on-surface-variant, #757e85);
}
@media (max-width: 1200px) {
.adm-productivity__top,
    .adm-productivity__trio {
      grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.adm-productivity__search,
    .adm-productivity__select {
      width: 100%;
}
.adm-productivity__heat-stats {
      gap: var(--emerald-spacing-m, 16px);
}
.adm-productivity__cell {
      height: 12px;
}
.adm-productivity__heat-cells {
      gap: 2px;
}
}

.adm-sales {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-l, 20px);
}

  /* EmCard variant="simple" ships 2px padding and its slots add none, so every
     card needs its own inset — see the EmCard padding gap row. */
.adm-sales .emerald-card {
    padding: var(--emerald-spacing-l, 20px);
    background: var(--emerald-background, #fefefe);
    border: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
    border-radius: var(--emerald-radius-xl, 12px);
    box-shadow: var(--emerald-shadow-s, 0 0 2px 0 rgba(51, 51, 51, 0.08));
}
.adm-sales__title {
    margin: 0;
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-sales__subtitle {
    margin: 0.25rem 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b1-size, 16px);
}
.adm-sales__panel-title {
    font-size: var(--emerald-text-b1-size, 16px) !important;
    font-weight: 700 !important;
}
.adm-sales__panel-sub {
    margin: 2px 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-sales__delta {
    font-style: normal;
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    color: var(--emerald-danger-500, #c61424);
}
.adm-sales__delta[data-up] {
    color: var(--emerald-primary-700, #027d4c);
}

  /* The revenue and funnel cards each claim both rows; the two stat cards fill
     the remaining single cells in column four. */
.adm-sales__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
}
.adm-sales__card--revenue {
    grid-column: span 2;
    grid-row: span 2;
}
.adm-sales__card--funnel {
    grid-row: span 2;
}
.adm-sales__card .emerald-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

  /* .emerald-card__header is flex-direction: column — a title/action row has to
     opt back into row explicitly. */
.adm-sales__revenue-head,
  .adm-sales__toolbar,
  .adm-sales__codes-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-sales__headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-sales__chart {
    display: flex;
    align-items: flex-end;
    gap: var(--emerald-spacing-s, 12px);
    height: 190px;
    margin-top: var(--emerald-spacing-xs, 8px);
}
.adm-sales__column {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 100%;
}
.adm-sales__bar {
    width: 58%;
    min-width: 16px;
    min-height: 6px;
    border-radius: var(--emerald-radius-xs, 4px) var(--emerald-radius-xs, 4px) 0 0;
    background: var(--emerald-primary-300, #baedd0);
}
.adm-sales__bar[data-peak] {
    background: var(--emerald-primary-600, #1fae60);
}
.adm-sales__column-total {
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.adm-sales__column-label {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-sales__lines {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-s, 12px);
    margin: auto 0 0;
    padding-top: var(--emerald-spacing-l, 20px);
    list-style: none;
}
.adm-sales__lines li,
  .adm-sales__referrers li {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr) 58px;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-sales__line-label,
  .adm-sales__referrer-label {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-sales__lines strong,
  .adm-sales__referrers strong {
    font-size: var(--emerald-text-b2-size, 14px);
    text-align: right;
}
.adm-sales__line-track {
    height: 10px;
    border-radius: 5px;
    background: var(--emerald-neutral-200, #f6f8fa);
    overflow: hidden;
}
.adm-sales__line-fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--emerald-primary-600, #1fae60);
}
.adm-sales__funnel {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--emerald-spacing-m, 16px);
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-sales__funnel li {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.adm-sales__funnel-label {
    font-size: var(--emerald-text-b2-size, 14px);
    font-weight: 600;
}
.adm-sales__funnel-track {
    height: 12px;
    border-radius: 6px;
    background: var(--emerald-neutral-200, #f6f8fa);
    overflow: hidden;
}
.adm-sales__funnel-fill {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: var(--emerald-primary-600, #1fae60);
}
.adm-sales__funnel-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-sales__funnel-meta strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-sales__stat-body {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-2xs, 4px);
    min-height: 116px;
}
.adm-sales__stat-label {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-sales__stat-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adm-sales__spark {
    width: 100%;
    height: 34px;
    margin-top: auto;
}
.adm-sales__toolbar-left,
  .adm-sales__toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-sales__show-select {
    width: 76px;
}
.adm-sales__status-select {
    width: 130px;
}
.adm-sales__search {
    width: 230px;
}
.adm-sales__table-wrap {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--emerald-spacing-l, 20px));
}
.adm-sales__table th:first-child,
  .adm-sales__table td:first-child {
    padding-left: var(--emerald-spacing-l, 20px);
}
.adm-sales__table th:last-child,
  .adm-sales__table td:last-child {
    padding-right: var(--emerald-spacing-l, 20px);
}
.adm-sales__table tbody tr {
    transition: background-color 120ms ease;
}
.adm-sales__table tbody tr:hover {
    background: var(--emerald-neutral-200, #f6f8fa);
}
.adm-sales__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--emerald-text-b2-size, 14px);
    white-space: nowrap;
}
.adm-sales__table th {
    padding: var(--emerald-spacing-xs, 8px) var(--emerald-spacing-s, 12px);
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
    text-align: left;
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-300, #ccd6e7);
}
.adm-sales__table td {
    padding: var(--emerald-spacing-s, 12px);
    border-bottom: var(--emerald-stroke-s, 1px) solid var(--emerald-neutral-200, #f6f8fa);
}
.adm-sales__id {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.adm-sales__client {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-xs, 8px);
}
.adm-sales__client strong {
    display: block;
}
.adm-sales__client-sub {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-sales__table-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-sales__table-count {
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-sales__page-gap {
    padding: 0 var(--emerald-spacing-2xs, 4px);
    color: var(--emerald-on-surface-variant, #757e85);
}
.adm-sales__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--emerald-spacing-m, 16px);
}
.adm-sales__pair .emerald-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.adm-sales__code-search {
    width: 160px;
}
.adm-sales__codes,
  .adm-sales__referrers {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--emerald-spacing-s, 12px);
    margin: var(--emerald-spacing-xs, 8px) 0 0;
    padding: 0;
    list-style: none;
}
.adm-sales__codes li {
    display: flex;
    align-items: center;
    gap: var(--emerald-spacing-s, 12px);
}
.adm-sales__codes code {
    min-width: 96px;
    padding: 4px var(--emerald-spacing-xs, 8px);
    border-radius: var(--emerald-radius-xs, 4px);
    background: var(--emerald-neutral-200, #f6f8fa);
    font-size: var(--emerald-text-b3-size, 12px);
    font-weight: 600;
}
.adm-sales__code-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b3-size, 12px);
}
.adm-sales__code-text strong {
    color: var(--emerald-on-surface, #2b2d2e);
    font-size: var(--emerald-text-b2-size, 14px);
}
.adm-sales__empty {
    margin: var(--emerald-spacing-m, 16px) 0 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: var(--emerald-text-b2-size, 14px);
}
@media (max-width: 1200px) {
.adm-sales__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adm-sales__card--revenue {
      grid-column: span 2;
      grid-row: auto;
}
.adm-sales__card--funnel {
      grid-column: span 2;
      grid-row: auto;
}
.adm-sales__pair {
      grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.adm-sales__grid {
      grid-template-columns: 1fr;
}
.adm-sales__card--revenue,
    .adm-sales__card--funnel {
      grid-column: auto;
}
.adm-sales__search,
    .adm-sales__code-search {
      width: 100%;
}
.adm-sales__chart {
      gap: 6px;
      height: 160px;
}
.adm-sales__column-total {
      font-size: 10px;
}
.adm-sales__lines li,
    .adm-sales__referrers li {
      grid-template-columns: 110px minmax(0, 1fr) 52px;
}
}

.eset-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.eset-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.eset-sub {
    margin: 0;
    color: var(--ed-muted, var(--emerald-on-surface-variant, #757e85));
}
.eset-tabs {
    width: 100%;
    max-width: min(960px, 100%);
    min-width: 0;
}
.eset-card.emerald-card {
    margin-top: 16px;
    background: var(--ed-surface, #fefefe);
    border: 1px solid var(--ed-border, #ccd6e7);
    border-radius: 12px;
    padding: 20px 24px;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}
.eset-card__title {
    font-size: 16px !important;
    font-weight: 700 !important;
}
.eset-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.eset-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.eset-avatar-actions {
    display: flex;
    gap: 8px;
}
.eset-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-width: 0;
}
.eset-row2 > * {
    min-width: 0;
}
.eset-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
}
.eset-placeholder {
    margin: 0;
    color: var(--ed-muted, #757e85);
}
@media (max-width: 720px) {
.eset-row2 {
      grid-template-columns: 1fr;
}
}

.esi {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--emerald-neutral-200, #f6f8fa);
    font-family: var(--emerald-font-sans, Manrope, system-ui, sans-serif);
    color: var(--emerald-on-surface, #2b2d2e);
}
.esi-hero {
    background:
      linear-gradient(145deg, rgba(1, 96, 58, 0.35), rgba(0, 0, 0, 0.15)),
      url('/demo/emerald/emerald/contact-hero.jpg') top / cover no-repeat;
}
.esi-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
}
.esi-card.emerald-card {
    width: min(100%, 420px);
    border: 0;
    box-shadow: var(--emerald-shadow-l, 0 5px 12px -1px rgba(51, 51, 51, 0.2));
}
.esi-form {
    display: flex;
    flex-direction: column;
    gap: var(--emerald-spacing-m, 16px);
    width: 100%;
}
.esi-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.esi-brand__mark {
    width: 28px;
    height: 28px;
    background: url('/demo/emerald/emerald/logo.png') center / contain no-repeat;
}
.esi-brand__name {
    font-weight: 700;
    font-size: 14px;
}
.esi-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.esi-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.esi-sub {
    margin: 0;
    color: var(--emerald-on-surface-variant, #757e85);
    font-size: 14px;
}
.esi-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.esi-link {
    color: var(--emerald-secondary-600, #00b4dc);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.esi-link:hover {
    text-decoration: underline;
}
.esi-submit {
    width: 100%;
}
.esi-footer {
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: var(--emerald-on-surface-variant, #757e85);
}
@media (max-width: 800px) {
.esi {
      grid-template-columns: 1fr;
}
.esi-hero {
      min-height: 28vh;
}
}
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-bg-opacity:100%;--un-border-opacity:100%;--un-ease:initial;--un-space-y-reverse:initial;--un-text-opacity:100%;}}@property --un-text-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-outline-style{syntax:"*";inherits:false;initial-value:solid;}@property --un-border-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-inset-ring-color{syntax:"*";inherits:false;}@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-inset-shadow-color{syntax:"*";inherits:false;}@property --un-ring-color{syntax:"*";inherits:false;}@property --un-ring-inset{syntax:"*";inherits:false;}@property --un-ring-offset-color{syntax:"*";inherits:false;}@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0px;}@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-shadow-color{syntax:"*";inherits:false;}@property --un-ease{syntax:"*";inherits:false;}@property --un-blur{syntax:"*";inherits:false;}@property --un-brightness{syntax:"*";inherits:false;}@property --un-contrast{syntax:"*";inherits:false;}@property --un-drop-shadow{syntax:"*";inherits:false;}@property --un-grayscale{syntax:"*";inherits:false;}@property --un-hue-rotate{syntax:"*";inherits:false;}@property --un-invert{syntax:"*";inherits:false;}@property --un-saturate{syntax:"*";inherits:false;}@property --un-sepia{syntax:"*";inherits:false;}@property --un-numeric-figure{syntax:"*";inherits:false;}@property --un-numeric-fraction{syntax:"*";inherits:false;}@property --un-numeric-spacing{syntax:"*";inherits:false;}@property --un-ordinal{syntax:"*";inherits:false;}@property --un-slashed-zero{syntax:"*";inherits:false;}@property --un-space-y-reverse{syntax:"*";inherits:false;initial-value:0;}:root, :host {--spacing: 0.25rem;--container-2xl: 42rem;--fontWeight-semibold: 600;--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--radius-DEFAULT: 0.25rem;--default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1);--default-transition-duration: 150ms;--ease-DEFAULT: cubic-bezier(0.4, 0, 0.2, 1);--text-2xl-fontSize: 1.5rem;--text-2xl-lineHeight: 2rem;--text-sm-fontSize: 0.875rem;--text-sm-lineHeight: 1.25rem;--text-xs-fontSize: 0.75rem;--text-xs-lineHeight: 1rem;--fontWeight-medium: 500;--colors-blue-500: oklch(62.3% 0.214 259.815);--fontWeight-bold: 700;--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);--font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--default-font-family: var(--font-sans);--default-monoFont-family: var(--font-mono);}/*  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)  2. Remove default margins and padding  3. Reset all borders.*/*,::after,::before,::backdrop,::file-selector-button {  box-sizing: border-box; /* 1 */  margin: 0; /* 2 */  padding: 0; /* 2 */  border: 0 solid; /* 3 */}/*  1. Use a consistent sensible line-height in all browsers.  2. Prevent adjustments of font size after orientation changes in iOS.  3. Use a more readable tab size.  4. Use the user's configured `sans` font-family by default.  5. Use the user's configured `sans` font-feature-settings by default.  6. Use the user's configured `sans` font-variation-settings by default.  7. Disable tap highlights on iOS.*/html,:host {  line-height: 1.5; /* 1 */  -webkit-text-size-adjust: 100%; /* 2 */  tab-size: 4; /* 3 */  font-family: var(    --default-font-family,    ui-sans-serif,    system-ui,    sans-serif,    'Apple Color Emoji',    'Segoe UI Emoji',    'Segoe UI Symbol',    'Noto Color Emoji'  ); /* 4 */  font-feature-settings: var(--default-font-featureSettings, normal); /* 5 */  font-variation-settings: var(--default-font-variationSettings, normal); /* 6 */  -webkit-tap-highlight-color: transparent; /* 7 */}/*  1. Add the correct height in Firefox.  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)  3. Reset the default border style to a 1px solid border.*/hr {  height: 0; /* 1 */  color: inherit; /* 2 */  border-top-width: 1px; /* 3 */}/*  Add the correct text decoration in Chrome, Edge, and Safari.*/abbr:where([title]) {  -webkit-text-decoration: underline dotted;  text-decoration: underline dotted;}/*  Remove the default font size and weight for headings.*/h1,h2,h3,h4,h5,h6 {  font-size: inherit;  font-weight: inherit;}/*  Reset links to optimize for opt-in styling instead of opt-out.*/a {  color: inherit;  -webkit-text-decoration: inherit;  text-decoration: inherit;}/*  Add the correct font weight in Edge and Safari.*/b,strong {  font-weight: bolder;}/*  1. Use the user's configured `mono` font-family by default.  2. Use the user's configured `mono` font-feature-settings by default.  3. Use the user's configured `mono` font-variation-settings by default.  4. Correct the odd `em` font sizing in all browsers.*/code,kbd,samp,pre {  font-family: var(    --default-monoFont-family,    ui-monospace,    SFMono-Regular,    Menlo,    Monaco,    Consolas,    'Liberation Mono',    'Courier New',    monospace  ); /* 1 */  font-feature-settings: var(--default-monoFont-featureSettings, normal); /* 2 */  font-variation-settings: var(--default-monoFont-variationSettings, normal); /* 3 */  font-size: 1em; /* 4 */}/*  Add the correct font size in all browsers.*/small {  font-size: 80%;}/*  Prevent `sub` and `sup` elements from affecting the line height in all browsers.*/sub,sup {  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baseline;}sub {  bottom: -0.25em;}sup {  top: -0.5em;}/*  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)  3. Remove gaps between table borders by default.*/table {  text-indent: 0; /* 1 */  border-color: inherit; /* 2 */  border-collapse: collapse; /* 3 */}/*  Use the modern Firefox focus style for all focusable elements.*/:-moz-focusring {  outline: auto;}/*  Add the correct vertical alignment in Chrome and Firefox.*/progress {  vertical-align: baseline;}/*  Add the correct display in Chrome and Safari.*/summary {  display: list-item;}/*  Make lists unstyled by default.*/ol,ul,menu {  list-style: none;}/*  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)      This can trigger a poorly considered lint error in some tools but is included by design.*/img,svg,video,canvas,audio,iframe,embed,object {  display: block; /* 1 */  vertical-align: middle; /* 2 */}/*  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)*/img,video {  max-width: 100%;  height: auto;}/*  1. Inherit font styles in all browsers.  2. Remove border radius in all browsers.  3. Remove background color in all browsers.  4. Ensure consistent opacity for disabled states in all browsers.*/button,input,select,optgroup,textarea,::file-selector-button {  font: inherit; /* 1 */  font-feature-settings: inherit; /* 1 */  font-variation-settings: inherit; /* 1 */  letter-spacing: inherit; /* 1 */  color: inherit; /* 1 */  border-radius: 0; /* 2 */  background-color: transparent; /* 3 */  opacity: 1; /* 4 */}/*  Restore default font weight.*/:where(select:is([multiple], [size])) optgroup {  font-weight: bolder;}/*  Restore indentation.*/:where(select:is([multiple], [size])) optgroup option {  padding-inline-start: 20px;}/*  Restore space after button.*/::file-selector-button {  margin-inline-end: 4px;}/*  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)*/::placeholder {  opacity: 1;}/*  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)*/@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or  (contain-intrinsic-size: 1px) /* Safari 17+ */ {  ::placeholder {    color: color-mix(in oklab, currentcolor 50%, transparent);  }}/*  Prevent resizing textareas horizontally by default.*/textarea {  resize: vertical;}/*  Remove the inner padding in Chrome and Safari on macOS.*/::-webkit-search-decoration {  -webkit-appearance: none;}/*  1. Ensure date/time inputs have the same height when empty in iOS Safari.  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.*/::-webkit-date-and-time-value {  min-height: 1lh; /* 1 */  text-align: inherit; /* 2 */}/*  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.*/::-webkit-datetime-edit {  display: inline-flex;}/*  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.*/::-webkit-datetime-edit-fields-wrapper {  padding: 0;}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {  padding-block: 0;}/*  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)*/::-webkit-calendar-picker-indicator {  line-height: 1;}/*  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)*/:-moz-ui-invalid {  box-shadow: none;}/*  Correct the inability to style the border radius in iOS Safari.*/button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button {  appearance: button;}/*  Correct the cursor style of increment and decrement buttons in Safari.*/::-webkit-inner-spin-button,::-webkit-outer-spin-button {  height: auto;}/*  Make elements with the HTML hidden attribute stay hidden by default.*/[hidden]:where(:not([hidden~='until-found'])) {  display: none !important;}        button:not(:disabled),        [role="button"]:not(:disabled) {          cursor: pointer;        }      .container{width:100%;}@media (min-width: 40rem){.container{max-width:40rem;}}@media (min-width: 48rem){.container{max-width:48rem;}}@media (min-width: 64rem){.container{max-width:64rem;}}@media (min-width: 80rem){.container{max-width:80rem;}}@media (min-width: 96rem){.container{max-width:96rem;}}.text-2xl{font-size:var(--text-2xl-fontSize);line-height:var(--un-leading, var(--text-2xl-lineHeight));}.text-sm{font-size:var(--text-sm-fontSize);line-height:var(--un-leading, var(--text-sm-lineHeight));}.text-xs{font-size:var(--text-xs-fontSize);line-height:var(--un-leading, var(--text-xs-lineHeight));}.text-error{color:color-mix(in srgb, var(--v0-error) var(--un-text-opacity), transparent) /* var(--v0-error) */;}.text-on-background{color:color-mix(in srgb, var(--v0-on-background) var(--un-text-opacity), transparent) /* var(--v0-on-background) */;}.text-on-primary{color:color-mix(in srgb, var(--v0-on-primary) var(--un-text-opacity), transparent) /* var(--v0-on-primary) */;}.text-on-surface{color:color-mix(in srgb, var(--v0-on-surface) var(--un-text-opacity), transparent) /* var(--v0-on-surface) */;}.text-on-surface-variant{color:color-mix(in srgb, var(--v0-on-surface-variant) var(--un-text-opacity), transparent) /* var(--v0-on-surface-variant) */;}.text-primary{color:color-mix(in srgb, var(--v0-primary) var(--un-text-opacity), transparent) /* var(--v0-primary) */;}.text-success{color:color-mix(in srgb, var(--v0-success) var(--un-text-opacity), transparent) /* var(--v0-success) */;}.text-warning{color:color-mix(in srgb, var(--v0-warning) var(--un-text-opacity), transparent) /* var(--v0-warning) */;}.hover\:text-on-surface:hover{color:color-mix(in srgb, var(--v0-on-surface) var(--un-text-opacity), transparent) /* var(--v0-on-surface) */;}.font-bold{--un-font-weight:var(--fontWeight-bold);font-weight:var(--fontWeight-bold);}.font-medium{--un-font-weight:var(--fontWeight-medium);font-weight:var(--fontWeight-medium);}.font-mono{font-family:var(--font-mono);}.font-semibold{--un-font-weight:var(--fontWeight-semibold);font-weight:var(--fontWeight-semibold);}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}.m1{margin:calc(var(--spacing) * 1);}.m2{margin:calc(var(--spacing) * 2);}.m21{margin:calc(var(--spacing) * 21);}.m3{margin:calc(var(--spacing) * 3);}.m4{margin:calc(var(--spacing) * 4);}.m5{margin:calc(var(--spacing) * 5);}.m6{margin:calc(var(--spacing) * 6);}.m7{margin:calc(var(--spacing) * 7);}.mx-auto{margin-inline:auto;}.my{margin-block:calc(var(--spacing) * 4);}.-mb-px{margin-bottom:-1px;}.mb-6{margin-bottom:calc(var(--spacing) * 6);}.me{margin-inline-end:calc(var(--spacing) * 4);}.ms{margin-inline-start:calc(var(--spacing) * 4);}.p-2,.p2{padding:calc(var(--spacing) * 2);}.p-4,.p4{padding:calc(var(--spacing) * 4);}.p-6,.p6{padding:calc(var(--spacing) * 6);}.p1{padding:calc(var(--spacing) * 1);}.p10{padding:calc(var(--spacing) * 10);}.p11{padding:calc(var(--spacing) * 11);}.p12{padding:calc(var(--spacing) * 12);}.p13{padding:calc(var(--spacing) * 13);}.p3{padding:calc(var(--spacing) * 3);}.p5{padding:calc(var(--spacing) * 5);}.p50{padding:calc(var(--spacing) * 50);}.p7{padding:calc(var(--spacing) * 7);}.p8{padding:calc(var(--spacing) * 8);}.p9{padding:calc(var(--spacing) * 9);}.p95{padding:calc(var(--spacing) * 95);}.px,.px-4{padding-inline:calc(var(--spacing) * 4);}.py-2{padding-block:calc(var(--spacing) * 2);}.text-right{text-align:right;}.outline{outline-style:var(--un-outline-style);outline-width:1px;}.b,.border{border-width:1px;}.border-b{border-bottom-width:1px;}.border-b-2{border-bottom-width:2px;}.border-blue-500{border-color:color-mix(in srgb, var(--colors-blue-500) var(--un-border-opacity), transparent) /* oklch(62.3% 0.214 259.815) */;}.border-divider{border-color:color-mix(in srgb, var(--v0-divider) var(--un-border-opacity), transparent) /* var(--v0-divider) */;}.border-primary{border-color:color-mix(in srgb, var(--v0-primary) var(--un-border-opacity), transparent) /* var(--v0-primary) */;}.border-transparent{border-color:transparent;}.rounded{border-radius:var(--radius-DEFAULT);}.bg-background{background-color:color-mix(in srgb, var(--v0-background) var(--un-bg-opacity), transparent) /* var(--v0-background) */;}.bg-primary{background-color:color-mix(in srgb, var(--v0-primary) var(--un-bg-opacity), transparent) /* var(--v0-primary) */;}.underline{text-decoration-line:underline;}.flex{display:flex;}.inline-flex{display:inline-flex;}.flex-1{flex:1 1 0%;}.flex-shrink{flex-shrink:1;}.grow{flex-grow:1;}.flex-wrap{flex-wrap:wrap;}.gap-3{gap:calc(var(--spacing) * 3);}.gap-4{gap:calc(var(--spacing) * 4);}.gap-x-2{column-gap:calc(var(--spacing) * 2);}.gap-x-4{column-gap:calc(var(--spacing) * 4);}.gap-y-2{row-gap:calc(var(--spacing) * 2);}.grid{display:grid;}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr;}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.h-full{height:100%;}.h1{height:calc(var(--spacing) * 1);}.h2{height:calc(var(--spacing) * 2);}.h3{height:calc(var(--spacing) * 3);}.h4{height:calc(var(--spacing) * 4);}.max-w-2xl{max-width:var(--container-2xl);}.min-h-screen{min-height:100vh;}.w-12{width:calc(var(--spacing) * 12);}.w-8{width:calc(var(--spacing) * 8);}.w-full{width:100%;}.inline{display:inline;}.block{display:block;}.inline-block{display:inline-block;}.hidden{display:none;}.visible{visibility:visible;}.collapse{visibility:collapse;}.resize{resize:both;}.select-all{-webkit-user-select:all;user-select:all;}.uppercase{text-transform:uppercase;}.lowercase{text-transform:lowercase;}.ring{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(1px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow{--un-shadow:0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.transform{transform:var(--un-rotate-x) var(--un-rotate-y) var(--un-rotate-z) var(--un-skew-x) var(--un-skew-y);}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));}.ease{--un-ease:var(--ease-DEFAULT);transition-timing-function:var(--ease-DEFAULT);}.ease-in-out{--un-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out);}.\[v0\:image\]{v0:image;}.items-center{align-items:center;}.inset-0{inset:calc(var(--spacing) * 0);}.justify-center{justify-content:center;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.sticky{position:sticky;}.static{position:static;}.blur{--un-blur:blur(8px);filter:var(--un-blur,) var(--un-brightness,) var(--un-contrast,) var(--un-grayscale,) var(--un-hue-rotate,) var(--un-invert,) var(--un-saturate,) var(--un-sepia,) var(--un-drop-shadow,);}.filter{filter:var(--un-blur,) var(--un-brightness,) var(--un-contrast,) var(--un-grayscale,) var(--un-hue-rotate,) var(--un-invert,) var(--un-saturate,) var(--un-sepia,) var(--un-drop-shadow,);}.table{display:table;}.border-collapse{border-collapse:collapse;}.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal,) var(--un-slashed-zero,) var(--un-numeric-figure,) var(--un-numeric-spacing,) var(--un-numeric-fraction,);}.space-y-1{:where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--un-space-y-reverse)));}}.space-y-2{:where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--un-space-y-reverse)));}}.space-y-6{:where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--un-space-y-reverse)));}}@supports (color: color-mix(in lab, red, red)){.border-blue-500{border-color:color-mix(in oklab, var(--colors-blue-500) var(--un-border-opacity), transparent) /* oklch(62.3% 0.214 259.815) */;}}