@layer modules {

  .session-show {
    margin-inline: auto;
    width: 100%;
    display: flex;
  }

  .session-show__inner {
    margin-inline: auto;
    width: 100%;
    max-width: 50rem;
  }

  .session-card {
    width: 100%;
    max-width: 50rem;
  }

  .session-card__banner {
    gap: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .session-card__banner-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  @media (min-width: 48rem) {
    .session-card__banner-row {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }

  .session-card__banner-title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .session-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .session-card__meta-text {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-red-100);
  }

  .session-card__reason {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-red-500);
  }

  .session-card__reason-text {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-red-100);
  }

  .session-card__reason-label {
    font-weight: var(--font-weight-medium);
  }

  .session-card__actions {
    display: flex;

    & > :not(:last-child) {
      margin-inline-end: 1rem;
    }
  }

  .session-card__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
  }

  @media (min-width: 48rem) {
    .session-card__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .session-card__recurrence {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-gray-100);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
  }

  .session-card__recurrence-info {
    display: flex;
    align-items: center;
    margin-inline-end: auto;
  }

  .session-card__recurrence-icon {
    margin-inline-end: 0.5rem;
    color: var(--color-gray-400);
    transition: rotate 0.6s var(--ease-in-out), color 0.6s var(--ease-in-out);

    .session-card__recurrence-info--repeating & {
      rotate: 180deg;
      color: var(--color-blue-600);
    }
  }

  .session-card__recurrence-text {
    display: grid;
    grid-template-columns: 0fr;
    overflow: clip;
    opacity: 0;
    white-space: nowrap;
    color: var(--color-gray-700);
    transition-property: grid-template-columns, margin-inline-end, opacity;
    transition-duration: 0.6s;
    transition-timing-function: var(--ease-in-out);

    > span {
      min-width: 0;
    }

    .session-card__recurrence-info--repeating & {
      grid-template-columns: 1fr;
      margin-inline-end: 0.5rem;
      opacity: 1;
    }
  }

  .session-card__recurrence-select {
    width: auto;
    padding-block: 0.5rem;
  }

  .session-card__section-title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-800);
    margin-bottom: 1rem;
  }

  .session-card__info-list {
    & > :not(:last-child) {
      margin-block-end: 0.75rem;
    }
  }

  .session-card__callout {
    padding: 0.5rem;
    border-radius: var(--radius-md);
  }

  .session-card__callout--office {
    background-color: var(--color-violet-50);
  }

  .session-card__callout--meeting {
    background-color: var(--color-slate-50);
  }

  .session-card__callout-label {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
  }

  .session-card__callout-address {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-700);
    white-space: pre-line;
  }

  .session-card__meeting-actions {
    margin-top: 0.25rem;
    display: flex;

    & > :not(:last-child) {
      margin-inline-end: 0.5rem;
    }
  }

  .session-card__meeting-link {
    display: flex;
    align-items: center;
    color: var(--color-blue-600);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    padding-inline: 0.5rem;
    padding-block: 0.25rem;
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-blue-200);

    &:hover {
      color: var(--color-blue-800);
    }
  }

  .session-card__meeting-copy {
    display: flex;
    align-items: center;
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    padding-inline: 0.5rem;
    padding-block: 0.25rem;
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-200);

    &:hover {
      color: var(--color-gray-800);
    }
  }

  .session-card__meeting-icon {
    height: 1rem;
    width: 1rem;
    margin-right: 0.25rem;
  }

  .session-form__errors {
    background-color: var(--color-red-50);
    color: var(--color-red-500);
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-lg);
    margin-top: 0.75rem;
  }

  .session-form__field {
    margin-block: 1.5rem;
  }

  .sessions-banner {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200-60);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
  }

  .sessions-banner__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--color-gray-100);
  }

  .sessions-banner__heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
  }

  .sessions-banner__calendar {
    flex-shrink: 0;
    width: 2.75rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-align: center;
    background-color: var(--color-white);
  }

  .sessions-banner__calendar-weekday {
    display: block;
    padding-block: 0.125rem;
    background-color: var(--color-indigo-600);
    color: var(--color-white);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
  }

  .sessions-banner__calendar-day {
    display: block;
    padding-block: 0.125rem 0.25rem;
    font-size: var(--text-xl);
    line-height: 1.15;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-gray-900);
    font-variant-numeric: tabular-nums;
  }

  .sessions-banner__count {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .sessions-banner__title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-gray-900);
  }

  .sessions-banner__range {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
    margin-top: 0.125rem;
  }

  .sessions-banner__body {
    padding: 1.25rem 1rem;
  }

  .sessions-banner__day + .sessions-banner__day {
    margin-top: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-gray-200);
  }

  .sessions-banner__day-label {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-gray-500);
  }

  .sessions-banner__day--today .sessions-banner__day-label {
    color: var(--color-gray-900);
  }

  .sessions-banner__slot {
    --slot-time-width: 3.25rem;
    --slot-track-width: 1.25rem;
    --slot-gap: 0.25rem;
    --slot-dot-offset: 2rem;
    --slot-dot-from: var(--color-blue-600);
    --slot-dot-to: var(--color-blue-400);
    --slot-dot-ring: 0 0 0 4px var(--color-white);
    position: relative;
    display: grid;
    grid-template-columns: var(--slot-time-width) var(--slot-track-width) minmax(0, 1fr);
    align-items: start;
    padding-block: var(--slot-gap);
  }

  @media (min-width: 48rem) {
    .sessions-banner__slot {
      --slot-time-width: 3.75rem;
      --slot-track-width: 1.75rem;
    }
  }

  .sessions-banner__slot:has(.sessions-banner__note-choices:not(.hidden)) {
    z-index: 2;
  }

  .sessions-banner__slot + .sessions-banner__slot::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--slot-time-width) + var(--slot-track-width) + 0.75rem);
    right: 0.75rem;
    height: 1px;
    background-color: var(--color-gray-100);
  }

  .sessions-banner__when {
    padding-top: 1.375rem;
    text-align: right;
    padding-inline-end: 0.5rem;
    font-variant-numeric: tabular-nums;
  }

  .sessions-banner__hour {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--slot-hour-color, var(--color-gray-900));
  }

  .sessions-banner__meridiem {
    display: block;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
  }

  .sessions-banner__marker {
    position: relative;
    display: block;
    align-self: stretch;

    &::before {
      content: "";
      position: absolute;
      top: calc(var(--slot-gap) * -1);
      bottom: calc(var(--slot-gap) * -1);
      left: 50%;
      width: 1px;
      translate: -50% 0;
      background-color: var(--color-gray-200);
    }

    &::after,
    .sessions-banner__ping {
      position: absolute;
      top: var(--slot-dot-offset);
      left: 50%;
      width: 0.5rem;
      height: 0.5rem;
      translate: -50% -50%;
      border-radius: var(--radius-full);
    }

    &::after {
      content: "";
      background-image: linear-gradient(to bottom right, var(--slot-dot-from), var(--slot-dot-to));
      box-shadow: var(--shadow-inner), var(--slot-dot-ring);
    }
  }

  .sessions-banner__slot:first-child .sessions-banner__marker::before {
    top: var(--slot-dot-offset);
  }

  .sessions-banner__slot:last-child .sessions-banner__marker::before {
    bottom: calc(100% - var(--slot-dot-offset));
  }

  .sessions-banner__slot--past {
    --slot-dot-from: var(--color-green-600);
    --slot-dot-to: var(--color-green-400);
    --slot-hour-color: var(--color-gray-500);
    --slot-name-color: var(--color-gray-600);
  }

  .sessions-banner__slot--cancelled {
    --slot-dot-from: var(--color-gray-100);
    --slot-dot-to: var(--color-white);
    --slot-dot-ring:
      inset 0 0 0 1.5px var(--color-gray-300),
      0 0 0 4px var(--color-white);
    --slot-hour-color: var(--color-gray-500);
    --slot-name-color: var(--color-gray-500);
  }

  .sessions-banner__slot--cancelled :is(.sessions-banner__hour, .sessions-banner__name) {
    text-decoration-line: line-through;
  }

  .sessions-banner__slot--cancelled .sessions-banner__avatars {
    opacity: 0.55;
  }

  .sessions-banner__ping {
    box-shadow: 0 0 0 2px var(--color-blue-400);
    opacity: 0.7;
    animation: var(--animate-ping);
  }

  .sessions-banner__row {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    transition: background-color var(--default-transition-duration) var(--default-transition-timing-function);
  }

  .sessions-banner__row-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  @media (min-width: 48rem) {
    .sessions-banner__row-inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 0;
    }
  }

  .sessions-banner__identity {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
  }

  @media (min-width: 48rem) {
    .sessions-banner__identity { flex-wrap: nowrap; }
  }

  .sessions-banner__avatar {
    --avatar-size: 2.5rem;
    outline: 2px solid var(--color-white);
  }

  .sessions-banner__avatars {
    display: flex;
    flex-shrink: 0;
  }

  .sessions-banner__avatars .sessions-banner__avatar + .sessions-banner__avatar {
    margin-inline-start: -0.625rem;
  }

  .sessions-banner__name {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--slot-name-color, var(--color-gray-900));
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: var(--radius-lg);
    }

    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      outline: 2px solid var(--focus-ring-color);
      outline-offset: 2px;
    }
  }

  .sessions-banner__actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .sessions-banner__actions .btn {
    flex: 1 1 0%;
    --btn-radius: var(--radius-lg);
  }

  .sessions-banner__note-menu {
    position: relative;
    flex: 1 1 0%;
  }

  .sessions-banner__note-menu .sessions-banner__note {
    width: 100%;
  }

  .sessions-banner__note-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.25rem;
    color: var(--color-blue-600);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);

    &:hover {
      color: var(--color-blue-700);
    }
  }

  .sessions-banner__note-choices {
    --menu-width: 18rem;
  }

  .note-choices__trigger {
    width: 100%;
    cursor: pointer;

    > :last-child {
      margin-inline-start: auto;
    }

    &::-webkit-details-marker {
      display: none;
    }
  }

  .note-choices__caret {
    transition: rotate 0.2s var(--default-transition-timing-function);

    .note-choices__group[open] > summary & {
      rotate: 180deg;
    }
  }

  .note-choices__choices {
    border-top: 1px solid var(--color-gray-100);
    background-color: var(--color-gray-50);
  }

  .session-menu {
    position-anchor: --session-menu;
  }

  [data-session-menu-open] {
    anchor-name: --session-menu;
  }

  .session-menu__note-group {
    anchor-name: --session-menu-notes;
  }

  .session-menu__notes {
    --menu-width: 14rem;
    --note-badge-size: auto;
    --note-badge-fill: transparent;

    margin: -0.25rem 0.25rem 0;
    position-anchor: --session-menu-notes;
    position-area: inline-end span-block-end;
    position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
  }

  .session-menu__trigger {
    --corner-btn-size: 1.25rem;
    --corner-btn-inset: 0.125rem;
    --corner-btn-radius: var(--radius-sm);
    --corner-btn-shadow: var(--shadow-xs);
    --corner-btn-color: var(--color-gray-600);

    z-index: 1;
    opacity: 0;

    :where([data-session-menu]:is(:hover, :focus-within, [data-session-menu-open])) > & {
      opacity: 1;
    }

    @media (any-hover: none) {
      opacity: 1;
    }
  }

  .session-menu__trigger--focus-only:not(:focus-visible) {
    opacity: 0;
    pointer-events: none;
  }

  .session-menu__trigger--card {
    --corner-btn-size: 2rem;
    --corner-btn-inset: 0.75rem;
    --corner-btn-radius: var(--radius-md);

    opacity: 1;
  }

  @media (min-width: 40rem) {
    .sessions-banner__actions .sessions-banner__note,
    .sessions-banner__note-menu { flex: none; }
  }

  .sessions-banner__action-icon {
    width: 1rem;
    height: 1rem;
  }

  .empty-state--banner .empty-state__icon {
    margin-bottom: 0.75rem;
  }

  .sessions-banner__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--color-gray-100);
    color: var(--color-blue-600);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);

    &:hover {
      color: var(--color-blue-700);
    }
  }

  .sessions-banner__all-icon {
    width: 1rem;
    height: 1rem;
    transition: translate var(--default-transition-duration) var(--default-transition-timing-function);
  }

  @media (any-hover: hover) {
    .sessions-banner__row:hover {
      background-color: var(--color-gray-50);
    }

    .sessions-banner__row:hover .sessions-banner__name {
      color: var(--color-blue-700);
    }

    .sessions-banner__all:hover .sessions-banner__all-icon {
      translate: 0.125rem 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sessions-banner__ping {
      animation: none;
    }

    .sessions-banner__row,
    .sessions-banner__all-icon {
      transition: none;
    }
  }

  @media (min-width: 48rem) {
    .sessions-banner__header,
    .sessions-banner__body,
    .sessions-banner__all {
      padding-inline: 1.5rem;
    }
  }

  .space-between {
    position: relative;
    margin-bottom: 2rem;
  }

  .space-between__shell {
    position: relative;
    background-color: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200-60);
  }

  .space-between__accent {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 0.25rem;
    background-color: var(--color-blue-500);
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }

  .space-between__summary {
    padding-inline: 1.5rem;
    padding-block: 1.25rem;
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }

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

  .space-between__summary-left {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .space-between__summary-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xl);
    background-image: linear-gradient(to bottom right, var(--color-blue-50), var(--color-indigo-100));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .space-between__summary-glyph {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-indigo-600);
  }

  .space-between__summary-title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    letter-spacing: var(--tracking-tight);
  }

  .space-between__summary-sub {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
    margin-top: 0.125rem;
  }

  .space-between__chevron {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-xl);
    background-color: var(--color-gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    .group:hover & {
      background-color: var(--color-gray-100);
    }
  }

  .space-between__chevron-icon {
    font-size: var(--text-xl);
    color: var(--color-gray-400);
    transition: transform 0.3s var(--default-transition-timing-function);

    .group[open] & {
      transform: rotate(180deg);
    }
  }

  .space-between__content {
    padding-inline: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .space-between__rail {
    display: none;
    position: absolute;
    left: 50%;
    top: 8rem;
    bottom: 3rem;
    width: 1px;
    background-color: var(--color-gray-200);
    transform: translateX(-50%);
    z-index: 0;
  }

  @media (min-width: 64rem) {
    .space-between__rail { display: block; }
  }

  .space-between__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 10;
  }

  @media (min-width: 64rem) {
    .space-between__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .space-between__col {
    position: relative;
  }

  .space-between__col--prev {
    z-index: 20;
  }

  .space-between__col--next {
    z-index: 10;
  }

  .space-between__connector {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
  }

  @media (min-width: 64rem) {
    .space-between__connector { display: flex; }
  }

  .space-between__connector-ring {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .space-between__connector-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-gray-400);
  }

  /* Space-between card. `color` varies (emerald/indigo) so the colour-keyed
     accents are split into modifier classes. */
  .between-card {
    position: relative;
  }

  .between-card__shell {
    background-image: linear-gradient(to bottom right, var(--color-gray-50), var(--color-white));
    border-radius: var(--radius-xl);
    border: 1px solid oklch(92.8% 0.006 264.531 / 0.8);
    transition: 0.3s var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter;

    &:hover {
      box-shadow: var(--shadow-md);
    }
  }

  .between-card__shell--emerald:hover {
    border-color: var(--color-emerald-200);
  }

  .between-card__shell--indigo:hover {
    border-color: var(--color-indigo-200);
  }

  .between-card__top {
    padding: 1.25rem;
    border-bottom: 1px solid var(--color-gray-100);
  }

  .between-card__top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .between-card__status-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .between-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding-inline: 0.625rem;
    padding-block: 0.25rem;
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
  }

  .between-card__status--completed {
    background-color: var(--color-emerald-50);
    color: var(--color-emerald-700);
    border: 1px solid var(--color-emerald-100);
  }

  .between-card__status--upnext {
    background-color: var(--color-indigo-50);
    color: var(--color-indigo-700);
    border: 1px solid var(--color-indigo-100);
  }

  .between-card__status-check {
    width: 0.75rem;
    height: 0.75rem;
  }

  .between-card__pulse {
    position: relative;
    display: flex;
    height: 0.5rem;
    width: 0.5rem;
  }

  .between-card__pulse-ping {
    animation: var(--animate-ping);
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: var(--radius-full);
    background-color: var(--color-indigo-400);
    opacity: 0.75;
  }

  .between-card__pulse-dot {
    position: relative;
    display: inline-flex;
    border-radius: var(--radius-full);
    height: 0.5rem;
    width: 0.5rem;
    background-color: var(--color-indigo-500);
  }

  .between-card__time {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-400);
    font-variant-numeric: tabular-nums;
  }

  .between-card__patient {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .between-card__avatar-wrap {
    position: relative;
  }

  .between-card__avatar {
    --avatar-size: 2.75rem;
  }

  .between-card__identity {
    min-width: 0;
    flex: 1 1 0%;
  }

  .between-card__name {
    display: block;
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:hover {
      color: var(--color-indigo-600);
    }
  }

  .between-card__type {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .between-card__bottom {
    padding: 1.25rem;
  }

  .between-card__note-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .between-card__note-icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-gray-400);
  }

  .between-card__note-title {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
  }

  /* Empty state uses the shared .empty-state--card; the bespoke tinted bg,
     larger icon and sub-text tweaks ride on the --between modifier. The
     padding override is anchored to --card so it beats its shorthand
     regardless of stylesheet load order. */
  .empty-state--between {
    --empty-state-card-bg: oklch(98.5% 0.002 247.839 / 0.5);
    --empty-state-icon-size: 3rem;
  }

  .empty-state--card.empty-state--between {
    padding-block: 2rem;
    padding-inline: 1rem;
  }

  .empty-state--between .empty-state__icon {
    margin-bottom: 0.75rem;
  }

  .empty-state--between .empty-state__icon-svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .empty-state--between .empty-state__text {
    margin-top: 0.25rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-400);
  }

  .between-card__footer {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-gray-100);
  }

  .between-card__profile-link {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-inline: 1rem;
    padding-block: 0.625rem;
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-xl);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:hover {
      background-color: var(--color-gray-200);
    }
  }

  .between-card__profile-icon {
    width: 1rem;
    height: 1rem;
  }

  .sessions-list__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.5rem;
  }

  .sessions-list__header--client {
    margin-block-start: 2rem;

    .sessions-list__title {
      font-size: var(--text-xl);
      line-height: var(--text-xl--line-height);
    }
  }

  .sessions-list__title {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    font-weight: var(--font-weight-semibold);
  }

  .sessions-list__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .sessions-list__panel {
    width: 100%;

    turbo-frame[src] & {
      transition: opacity 180ms var(--ease-out), translate 180ms var(--ease-out);

      @starting-style {
        opacity: 0;
        translate: var(--sessions-list-enter) 0;
      }
    }
  }

  .sessions-list__panel--upcoming { --sessions-list-enter: -8px; }
  .sessions-list__panel--past { --sessions-list-enter: 8px; }

  @media (min-width: 40rem) {
    .sessions-list__panel { max-width: 40rem; }
  }

  @media (min-width: 48rem) {
    .sessions-list__panel { max-width: 48rem; }
  }

  @media (min-width: 64rem) {
    .sessions-list__panel { max-width: 64rem; }
  }

  @media (min-width: 80rem) {
    .sessions-list__panel { max-width: 80rem; }
  }

  @media (min-width: 96rem) {
    .sessions-list__panel { max-width: 96rem; }
  }

  .sessions-list__empty {
    text-align: center;
    padding-block: 3rem;
  }

  .sessions-list__empty-icon-wrap {
    margin-inline: auto;
    height: 3.5rem;
    width: 3.5rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .sessions-list__empty-icon-wrap--upcoming {
    background-color: var(--color-emerald-50);
  }

  .sessions-list__empty-icon-wrap--past {
    background-color: var(--color-gray-50);
  }

  .sessions-list__empty-icon {
    height: 1.75rem;
    width: 1.75rem;
  }

  .sessions-list__empty-icon--upcoming {
    color: var(--color-emerald-400);
  }

  .sessions-list__empty-icon--past {
    color: var(--color-gray-400);
  }

  .sessions-list__empty-title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }

  .sessions-list__empty-sub {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
    max-width: 20rem;
    margin-inline: auto;
  }

  .sessions-list__group {
    margin-bottom: 2rem;
  }

  .sessions-list__loading {
    padding-block: 3rem;
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-text-muted);
  }

  .past-sessions__row--cancelled {
    color: var(--color-text-muted);

    .shared-table__primary {
      text-decoration-line: line-through;
    }
  }

  .past-sessions__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .past-sessions__none {
    color: var(--color-text-muted);
  }

  .past-sessions__add {
    position: relative;
  }

  .sessions-list__group-title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 1rem;
  }

  .sessions-list__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
  }

  @media (min-width: 48rem) {
    .sessions-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 64rem) {
    .sessions-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .session-modal {
    background-color: var(--color-white);
    padding-inline: 1rem;
    padding-bottom: 1rem;
    padding-top: 1.25rem;
  }

  @media (min-width: 40rem) {
    .session-modal {
      padding: 1.5rem;
      padding-bottom: 1rem;
    }
  }

  .session-modal__layout {
    display: block;
  }

  @media (min-width: 40rem) {
    .session-modal__layout {
      display: flex;
      align-items: flex-start;
    }
  }

  .session-modal__icon-circle {
    margin-inline: auto;
    display: flex;
    height: 3rem;
    width: 3rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--color-red-100);
  }

  @media (min-width: 40rem) {
    .session-modal__icon-circle {
      margin-inline: 0;
      height: 2.5rem;
      width: 2.5rem;
    }
  }

  .session-modal__icon {
    height: 1.5rem;
    width: 1.5rem;
    color: var(--color-red-600);
  }

  .session-modal__body {
    margin-top: 0.75rem;
    text-align: center;
    width: 100%;
  }

  @media (min-width: 40rem) {
    .session-modal__body {
      margin-left: 1rem;
      margin-top: 0;
      text-align: left;
    }
  }

  .session-modal__title {
    font-size: var(--text-lg);
    line-height: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: 1rem;
  }

  .session-modal__field {
    margin-bottom: 1rem;
  }

  .session-modal__textarea {
    &:focus {
      --focus-ring-color: var(--color-red-500);
    }
  }

  .session-modal__check {
    display: flex;
    align-items: center;
  }

  .session-modal__check-input {
    color: var(--color-red-600);
  }

  .session-modal__check-label {
    margin-left: 0.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-700);
  }

  .session-delete {
    background-color: var(--color-white);
    padding-inline: 1rem;
    padding-bottom: 1rem;
    padding-top: 1.25rem;
  }

  @media (min-width: 40rem) {
    .session-delete {
      padding: 1.5rem;
      padding-bottom: 1rem;
    }
  }

  .session-delete__layout {
    display: block;
  }

  @media (min-width: 40rem) {
    .session-delete__layout {
      display: flex;
      align-items: flex-start;
    }
  }

  .session-delete__icon-circle {
    margin-inline: auto;
    display: flex;
    height: 3rem;
    width: 3rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--color-red-100);
  }

  @media (min-width: 40rem) {
    .session-delete__icon-circle {
      margin-inline: 0;
      height: 2.5rem;
      width: 2.5rem;
    }
  }

  .session-delete__icon {
    height: 1.5rem;
    width: 1.5rem;
    color: var(--color-red-600);
  }

  .session-delete__body {
    margin-top: 0.75rem;
    text-align: center;
    width: 100%;
  }

  @media (min-width: 40rem) {
    .session-delete__body {
      margin-left: 1rem;
      margin-top: 0;
      text-align: left;
    }
  }

  .session-delete__title {
    font-size: var(--text-lg);
    line-height: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
  }

  .session-delete__text {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-600);
  }

  .session-delete__notes-callout {
    margin-top: 1rem;
    border-radius: var(--radius-lg);
    background-color: var(--color-amber-50);
    border: 1px solid var(--color-amber-200);
    padding: 0.75rem;
  }

  .session-delete__notes-head {
    display: flex;
    gap: 0.5rem;
  }

  .session-delete__notes-icon {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--color-amber-600);
    flex-shrink: 0;
    margin-top: 0.125rem;
  }

  .session-delete__notes-title {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-amber-900);
  }

  .session-delete__notes-sub {
    margin-top: 0.125rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-amber-700);
  }

  .session-delete__notes-list {
    margin-top: 0.75rem;
    & > :not(:last-child) {
      border-bottom: 1px solid var(--color-amber-200);
    }
  }

  .session-delete__notes-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
    padding-inline: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .session-delete__note-title {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }

  .session-delete__note-date {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-500);
    white-space: nowrap;
  }

  .session-mini {
    position: relative;
    background-color: var(--color-white);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: 0.3s var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter;

    &:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-0.125rem);
    }
  }

  .session-mini--cancelled {
    opacity: 0.6;

    &:hover {
      box-shadow: var(--shadow-sm);
      transform: none;
    }
  }

  .session-mini--live {
    box-shadow: var(--shadow-lg);

    &:hover {
      box-shadow: var(--shadow-xl);
    }
  }

  .session-mini__link {
    display: block;
    padding: 1.25rem;
  }

  .session-mini__content {
    padding: 1.25rem;
  }

  .session-mini__head {
    display: flex;
    gap: 1rem;
  }

  .session-mini__time {
    flex-shrink: 0;
    width: 5rem;
    text-align: center;
  }

  .session-mini__time-box {
    border-radius: var(--radius-xl);
    padding-block: 0.75rem;
    padding-inline: 0.5rem;
    background-color: var(--color-blue-50);
  }

  .session-mini__time-box--hoverable {
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    .group:hover & {
      background-color: var(--color-blue-100);
    }
  }

  .session-mini__time-box--cancelled {
    background-color: var(--color-gray-100);

    .group:hover & {
      background-color: var(--color-gray-100);
    }
  }

  .session-mini--live .session-mini__time-box {
    background-color: var(--color-primary);

    .group:hover & {
      background-color: var(--color-primary-strong);
    }
  }

  .session-mini--live :is(.session-mini__hour, .session-mini__meridiem) {
    color: var(--color-white);
  }

  .session-mini__time-inner {
    display: block;
  }

  .session-mini__hour {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    color: var(--color-blue-600);
  }

  .session-mini__hour--cancelled {
    color: var(--color-gray-400);
  }

  .session-mini__meridiem {
    display: block;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-blue-500);
  }

  .session-mini__meridiem--cancelled {
    color: var(--color-gray-400);
  }

  .session-mini__details {
    flex: 1 1 0%;
    min-width: 0;
    padding-block: 0.25rem;
  }

  .session-mini__type {
    font-size: var(--text-base);
    line-height: var(--leading-tight);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: 0.375rem;
  }

  .session-mini__type--cancelled {
    text-decoration-line: line-through;
    color: var(--color-gray-500);
  }

  .session-mini__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
  }

  .session-mini__duration {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .session-mini__badge {
    margin-top: 0.5rem;
  }

  .session-mini__live {
    position: relative;
    font-weight: var(--font-weight-semibold);

    &::before {
      content: "";
      position: absolute;
      inset: -1px;
      padding: 1px;
      border-radius: inherit;
      background-image:
        conic-gradient(from var(--gradient-angle), transparent 55%, var(--color-purple-400), var(--color-purple-600), transparent),
        linear-gradient(var(--color-purple-200) 0 0);
      mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
      mask-clip: content-box, border-box;
      mask-composite: exclude;
      -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
      -webkit-mask-clip: content-box, border-box;
      -webkit-mask-composite: xor;
      animation: var(--animate-spin-gradient);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .session-mini__live::before {
      animation: none;
    }
  }

  .session-mini__arrow {
    flex-shrink: 0;
    align-self: center;
  }

  .session-mini__arrow-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-gray-300);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    .group:hover & {
      color: var(--color-gray-400);
    }
  }

  .session-mini__footer {
    padding-inline: 1.25rem;
    padding-block: 0.75rem;
    background-color: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-100);
  }

  .session-mini__footer--spread {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .session-mini__footer--roomy {
    padding-block: 1rem;
  }

  .session-mini__footer--stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
  }

  .session-mini__footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .session-mini__footer-label {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-500);
  }

  .session-mini__join {
    --btn-gap: 0.375rem;
    --btn-padding: 0.375rem 0.75rem;
    --btn-radius: var(--radius-lg);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }

  .session-mini__cancelled-text {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-600);
  }

  .session-mini__cancelled-by {
    font-weight: var(--font-weight-medium);
  }

  .session-mini__dot {
    color: var(--color-gray-400);
    margin-inline: 0.25rem;
  }

  .session-mini__reason {
    margin-top: 0.375rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
    font-style: italic;
  }

  .session-mini__notice {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-amber-700);
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .session-mini__notice-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
  }

  .session-mini__cancel-link {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-500);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:hover {
      color: var(--color-red-600);
    }
  }
}

@layer modules {
  .visit-type {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .visit-type--in-person {
    color: var(--color-violet-600);
  }

  .visit-type--video {
    color: var(--color-blue-600);
  }

  .visit-type__icon {
    width: 1rem;
    height: 1rem;
  }

  .session-card-fill {
    background-color: var(--color-white);
  }

  .session-card-fill--cancelled {
    background-color: var(--color-gray-100);
    opacity: 0.6;
  }

  .attendee-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    vertical-align: top;
  }
}