@layer modules {

  .sessions-index {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  @media (min-width: 64rem) {
    .sessions-index__panel {
      display: flex;
      height: 100%;
      flex-direction: column;
    }
  }

  .sessions-index__panel--week {
    width: 100%;
  }

  .sessions-index__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: 1rem;
  }

  @media (min-width: 64rem) {
    .sessions-index__header { flex: none; }
  }

  .sessions-index__title {
    font-size: var(--text-base);
    line-height: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-right: auto;
  }

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

  .sessions-toggle {
    display: inline-flex;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--color-gray-300), var(--shadow-xs);
  }

  .sessions-toggle__option {
    padding-inline: 0.75rem;
    padding-block: 0.375rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
  }

  .sessions-toggle__option--start {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .sessions-toggle__option--end {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    border-left: 1px solid var(--color-gray-300);
  }

  .sessions-toggle__option--active {
    background-color: var(--color-white);
    color: var(--color-gray-900);
  }

  .sessions-toggle__option--inactive {
    background-color: var(--color-gray-50);
    color: var(--color-gray-500);

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

  .sessions-nav {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    box-shadow: var(--shadow-xs);
  }

  @media (min-width: 48rem) {
    .sessions-nav { align-items: stretch; }
  }

  .sessions-nav__arrow {
    display: flex;
    height: 2.25rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border-block: 1px solid var(--color-gray-300);
    color: var(--color-gray-400);

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

    &:focus {
      position: relative;
    }
  }

  .sessions-nav__arrow--prev {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    border-left: 1px solid var(--color-gray-300);
    padding-right: 0.25rem;
  }

  .sessions-nav__arrow--next {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    border-right: 1px solid var(--color-gray-300);
    padding-left: 0.25rem;
  }

  @media (min-width: 48rem) {
    .sessions-nav__arrow { width: 2.25rem; }
    .sessions-nav__arrow--prev { padding-right: 0; }
    .sessions-nav__arrow--next { padding-left: 0; }
    .sessions-nav__arrow:hover { background-color: var(--color-gray-50); }
  }

  .sessions-nav__today {
    display: flex;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border-block: 1px solid var(--color-gray-300);
    padding-inline: 0.875rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);

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

    &:focus {
      position: relative;
    }
  }

  .sessions-nav__divider {
    position: relative;
    margin-inline: -1px;
    height: 1.25rem;
    width: 1px;
    background-color: var(--color-gray-300);
  }

  @media (min-width: 48rem) {
    .sessions-nav__divider { display: none; }
  }

  .sessions-nav__icon {
    height: 1.25rem;
    width: 1.25rem;
  }


  .month-calendar {
    box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-black-5);
  }

  @media (min-width: 64rem) {
    .month-calendar {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
    }
  }

  .month-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    border-bottom: 1px solid var(--color-gray-300);
    background-color: var(--color-gray-200);
    text-align: center;
    font-size: var(--text-xs);
    line-height: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }

  @media (min-width: 64rem) {
    .month-calendar__weekdays { flex: none; }
  }

  .month-calendar__weekday {
    display: flex;
    justify-content: center;
    background-color: var(--color-white);
    padding-block: 0.5rem;
  }

  .month-calendar__weekday-suffix {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }

  @media (min-width: 40rem) {
    .month-calendar__weekday-suffix {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }

  .month-calendar__grid-wrap {
    display: flex;
    background-color: var(--color-gray-200);
    font-size: var(--text-xs);
    line-height: 1.5rem;
    color: var(--color-gray-700);
  }

  @media (min-width: 64rem) {
    .month-calendar__grid-wrap { flex: 1 1 auto; }
  }

  .month-calendar__grid {
    display: none;
  }

  @media (min-width: 64rem) {
    .month-calendar__grid {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      /*
        One row per week, sized by content. repeat(auto-fill, ...) collapses to
        a single 1px track here (its min is 0), stacking every week on row one;
        grid-auto-rows lets the week count drive the rows (4-6 per month) while
        1fr shares leftover height so the grid fills its container.
      */
      grid-auto-rows: minmax(8rem, 1fr);
      gap: 1px;
    }
  }

  .month-calendar__day {
    position: relative;
    background-color: var(--color-white);
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    min-height: 8rem;
    min-width: 8rem;
  }

  .month-calendar__day--outside {
    background-color: var(--color-gray-50);
  }

  .month-calendar__add-icon {
    height: 1rem;
    width: 1rem;
  }

  .month-calendar__add {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    display: inline-flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    color: var(--color-gray-500);
    box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--color-gray-200);

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

    &:focus-visible {
      --focus-ring-color: var(--color-indigo-600);
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .month-calendar__date {
  }

  .month-calendar__date--outside {
    color: var(--color-gray-400);
  }

  .month-calendar__date--today {
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--color-indigo-600);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
  }

  .month-calendar__events {
    margin-top: 0.5rem;
  }

  .month-calendar__event {
    position: relative;
  }

  .month-calendar__event-link {
    display: flex;
  }

  .month-calendar__tooltip {
    position: absolute;
    z-index: 10;
    visibility: hidden;
    background-color: var(--color-gray-900);
    color: var(--color-white);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    border-radius: var(--radius-md);
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    margin-top: -3.5rem;
    margin-left: -0.5rem;
    white-space: nowrap;

    .month-calendar__event-link:hover & {
      visibility: visible;
      animation: var(--animate-slide-down);
    }
  }

  .month-calendar__tooltip-sub {
    color: var(--color-gray-300);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }

  .month-calendar__tooltip-caret {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--color-gray-900);
    rotate: 45deg;
    bottom: -0.25rem;
    left: 1rem;
  }

  .month-calendar__event-type {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);

    .month-calendar__event-link:hover & {
      color: var(--color-indigo-600);
    }
  }

  .month-calendar__event-type--cancelled {
    text-decoration-line: line-through;
    opacity: 0.6;
  }

  .month-calendar__event-time {
    margin-left: 0.75rem;
    display: none;
    flex: none;
    color: var(--color-gray-500);

    .month-calendar__event-link:hover & {
      color: var(--color-indigo-600);
    }
  }

  @media (min-width: 80rem) {
    .month-calendar__event-time { display: block; }
  }

  .month-calendar__event-time--cancelled {
    text-decoration-line: line-through;
    opacity: 0.6;
  }

  .month-calendar__mobile {
    isolation: isolate;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 1px;
  }

  @media (min-width: 64rem) {
    .month-calendar__mobile { display: none; }
  }

  .month-calendar__mobile-day {
    display: flex;
    height: 3.5rem;
    flex-direction: column;
    padding-inline: 0.75rem;
    padding-block: 0.5rem;

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

    &:focus {
      z-index: 10;
    }
  }

  .month-calendar__mobile-day--in {
    background-color: var(--color-white);
  }

  .month-calendar__mobile-day--out {
    background-color: var(--color-gray-50);
  }

  .month-calendar__mobile-day--selected {
    font-weight: var(--font-weight-semibold);
    color: var(--color-indigo-600);
  }

  .month-calendar__mobile-day--unselected {
    color: var(--color-gray-900);
  }

  .month-calendar__mobile-date {
    margin-left: auto;
  }

  .month-calendar__mobile-date--today {
    background-color: var(--color-indigo-600);
    color: var(--color-white);
    border-radius: var(--radius-full);
    height: 1.5rem;
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .month-calendar__mobile-dots {
    margin-inline: -0.125rem;
    margin-top: auto;
    display: flex;
    flex-wrap: wrap-reverse;
  }

  .month-calendar__mobile-dot {
    margin-inline: 0.125rem;
    margin-bottom: 0.25rem;
    height: 0.375rem;
    width: 0.375rem;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-400);
  }


  .week-calendar {
    display: none;
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-black-5);
    margin-top: 0.5rem;
  }

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

  .week-calendar__headers {
    display: grid;
    grid-template-columns: 4rem repeat(7, 1fr);
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
  }

  .week-calendar__header {
    position: relative;
    padding-block: 0.75rem;
    text-align: center;
    border-left: 1px solid var(--color-gray-200);
  }

  .week-calendar__header-day {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    text-transform: uppercase;
  }

  .week-calendar__header-date {
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .week-calendar__header-date-today {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--color-indigo-600);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
  }

  .week-calendar__header-date-num {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }

  .week-calendar__grid {
    display: grid;
    grid-template-columns: 4rem repeat(7, 1fr);
    position: relative;
    background-color: var(--color-white);
  }

  .week-calendar__times {
    position: relative;
  }

  .week-calendar__time-label {
    position: absolute;
    right: 0.75rem;
    font-size: 11px;
    color: var(--color-gray-400);
    line-height: 1;
  }

  .week-calendar__scroll-anchor {
    position: absolute;
  }

  .week-calendar__column {
    position: relative;
    border-left: 1px solid var(--color-gray-200);
  }

  .week-calendar__column--today {
    background-color: oklch(96.2% 0.018 272.314 / 0.2);
  }

  .week-calendar__slot {
    position: absolute;
    width: 100%;
    border-top: 1px solid var(--color-gray-100);
  }

  .week-calendar__slot-half {
    position: absolute;
    width: 100%;
    border-top: 1px dashed var(--color-gray-50);
  }

  .week-calendar__add-icon {
    height: 0.75rem;
    width: 0.75rem;
  }

  .week-calendar__add {
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    display: inline-flex;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    color: var(--color-gray-500);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--color-gray-200);
    z-index: 30;

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

  .week-calendar__event {
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    border-radius: var(--radius-md);
    padding-inline: 0.5rem;
    padding-block: 0.25rem;
    overflow: hidden;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    z-index: 10;
  }

  .week-calendar__event--cancelled {
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    opacity: 0.6;
  }

  .week-calendar__event--active {
    background-color: var(--color-indigo-50);
    border: 1px solid var(--color-indigo-200);

    &:hover {
      background-color: var(--color-indigo-100);
      border-color: var(--color-indigo-300);
    }
  }

  .week-calendar__event-name {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .week-calendar__event-name--cancelled {
    color: var(--color-gray-500);
    text-decoration-line: line-through;
  }

  .week-calendar__event-name--active {
    color: var(--color-indigo-900);
  }

  .week-calendar__event-time {
    font-size: 10px;
    line-height: var(--leading-tight);
  }

  .week-calendar__event-time--cancelled {
    color: var(--color-gray-400);
  }

  .week-calendar__event-time--active {
    color: var(--color-indigo-600);
  }

  .week-calendar__event-type {
    font-size: 10px;
    line-height: var(--leading-tight);
  }

  .week-calendar__event-type--cancelled {
    color: var(--color-gray-400);
    text-decoration-line: line-through;
  }

  .week-calendar__event-type--active {
    color: var(--color-indigo-500);
  }


  .sessions-mobile-month {
    width: 100%;
    margin-top: 2rem;
  }

  @media (min-width: 64rem) {
    .sessions-mobile-month { display: none; }
  }

  .sessions-mobile-month__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .sessions-mobile-month__title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
  }

  .sessions-mobile-month__add {
    border-radius: var(--radius-lg);
    padding-block: 0.5rem;
    padding-inline: 1rem;
    background-color: var(--color-indigo-600);
    color: var(--color-white);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
  }

  .sessions-mobile-month__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .sessions-mobile-month__empty {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .sessions-mobile-week {
    width: 100%;
    margin-top: 1rem;
  }

  @media (min-width: 64rem) {
    .sessions-mobile-week { display: none; }
  }

  .sessions-mobile-week__day {
    margin-bottom: 1.5rem;
  }

  .sessions-mobile-week__day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
  }

  .sessions-mobile-week__day-title {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
  }

  .sessions-mobile-week__day-title--today {
    color: var(--color-indigo-600);
  }

  .sessions-mobile-week__day-title--other {
    color: var(--color-gray-900);
  }

  .sessions-mobile-week__today-tag {
    margin-left: 0.25rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-indigo-500);
  }

  .sessions-mobile-week__add {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-indigo-600);
    font-weight: var(--font-weight-medium);
  }

  .sessions-mobile-week__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .sessions-mobile-week__empty {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-400);
    padding-block: 0.5rem;
  }


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

  .session-show__inner {
    margin-inline: auto;
  }

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

  .session-page {
    margin-inline: auto;
    width: 100%;
  }

  @media (min-width: 48rem) {
    .session-page { width: 66.6667%; }
  }

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


  .session-card {
    background-color: var(--color-white);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    width: 100%;
  }

  @media (min-width: 48rem) {
    .session-card { width: 50rem; }
  }

  .session-card__banner {
    color: var(--color-white);
    padding-inline: 1.5rem;
    padding-block: 1rem;
  }

  .session-card__banner--cancelled {
    background-color: var(--color-red-600);
  }

  .session-card__banner--active {
    background-color: var(--color-blue-600);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .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__title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-semibold);
  }

  .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__body {
    padding: 1.5rem;
  }

  .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__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 {
    display: contents;
  }

  .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;
  }

  .session-form__label {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }

  .session-form__input {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    border-radius: var(--radius-md);
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-xs);

    &:focus {
      --focus-ring-color: var(--color-blue-500);
    }
  }

  @media (min-width: 40rem) {
    .session-form__input {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
    }
  }

  .session-form__duration-presets {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .session-form__duration-preset {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    padding-inline: 0.5rem;
    padding-block: 0.25rem;
    border-radius: var(--radius-sm);

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

  .session-form__submit-wrap {
    display: inline;
    margin-inline-end: 0.5rem;
  }

  .session-form__modal-footer {
    background-color: var(--color-gray-50);
    padding-inline: 1rem;
    padding-block: 0.75rem;
    margin-inline: -1rem;
    margin-bottom: -1rem;
    margin-top: 2rem;
  }

  @media (min-width: 40rem) {
    .session-form__modal-footer {
      display: flex;
      flex-direction: row-reverse;
      padding-inline: 1.5rem;
    }
  }

  @media (min-width: 40rem) {
    .session-form__modal-submit {
      margin-left: 0.75rem;
    }
  }

  .session-form__modal-cancel {
    margin-top: 0.75rem;
    display: inline-flex;
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    box-shadow: inset 0 0 0 1px var(--color-gray-300), var(--shadow-xs);

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

  @media (min-width: 40rem) {
    .session-form__modal-cancel {
      margin-top: 0;
      width: auto;
    }
  }


  .session-payment-actions {
    margin-top: 1.5rem;
  }

  .session-payment-actions__group {
    display: flex;
    flex-direction: column;

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

  .session-payment-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .session-payment-actions__icon {
    height: 1rem;
    width: 1rem;
  }

  .session-payment-actions__icon--tight {
    height: 1rem;
    width: 1rem;
    margin-right: 0.25rem;
  }

  .session-payment-link {
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 1rem;
  }

  .session-payment-link__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }

  .session-payment-link__title {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }

  .session-payment-link__close {
    color: var(--color-gray-400);
    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-gray-600);
    }
  }

  .session-payment-link__row {
    display: flex;
    align-items: center;

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

  .session-payment-link__amount-group {
    display: flex;
    align-items: center;
  }

  .session-payment-link__amount-label {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    margin-right: 0.5rem;
  }

  .session-payment-link__field-wrap {
    position: relative;
  }

  .session-payment-link__prefix {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .session-payment-link__input {
    padding-left: 1.5rem;
    padding-right: 0.75rem;
    padding-block: 0.5rem;
    width: 8rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);

    /* Recolours the base focus ring to blue. */
    &:focus {
      --focus-ring-color: var(--color-blue-500);
      border-color: var(--color-blue-500);
    }
  }

  .session-payment-link__hint {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-500);
    margin-top: 0.5rem;
  }


  .sessions-banner {
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 2rem;
  }

  .sessions-banner__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

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

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

  :where(.sessions-banner__body > :not(:last-child)) {
    margin-block-start: 0;
    margin-block-end: 1rem;
  }

  .sessions-banner__day {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    color: var(--color-gray-600);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  .sessions-banner__row {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 1rem;
  }

  .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: 1rem;
    align-items: center;
  }

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

  .sessions-banner__time {
    background-color: var(--color-green-50);
    padding-inline: 0.75rem;
    padding-block: 0.25rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-green-700);
    white-space: nowrap;
  }

  .sessions-banner__avatar {
    color: var(--color-blue-600);
    background-color: var(--color-blue-50);
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
  }

  .sessions-banner__name {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }

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

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

  @media (min-width: 48rem) {
    .sessions-banner__actions .sessions-banner__view { flex: none; }
  }

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

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

  .empty-state--banner {
    --empty-state-padding-block: 0.75rem;
  }

  .sessions-banner__all {
    margin-top: 1rem;
    color: var(--color-blue-600);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    display: flex;
    justify-content: flex-end;

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

  .sessions-banner__all-icon {
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
  }


  .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 oklch(92.8% 0.006 264.531 / 0.6);
  }

  .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 {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-sm), 0 0 0 2px var(--color-white);
  }

  .between-card__avatar--emerald {
    background-image: linear-gradient(to bottom right, var(--color-emerald-100), var(--color-emerald-50));
    color: var(--color-emerald-700);
  }

  .between-card__avatar--indigo {
    background-image: linear-gradient(to bottom right, var(--color-indigo-100), var(--color-indigo-50));
    color: var(--color-indigo-700);
  }

  .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__tabs-wrap {
    margin-bottom: 1rem;
  }

  .sessions-list__panel {
    width: 100%;
  }

  @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__tabs-border {
    border-bottom: 1px solid var(--color-gray-200);
  }

  .sessions-list__tabs {
    margin-bottom: -1px;
    display: flex;
  }

  .sessions-list__tab {
    border-bottom: 2px solid transparent;
    padding-block: 1rem;
    padding-inline: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
  }

  .sessions-list__tab--active {
    border-bottom-color: var(--color-indigo-500);
    color: var(--color-indigo-600);
  }

  .sessions-list__tab--inactive {
    color: var(--color-gray-500);

    &:hover {
      color: var(--color-gray-700);
      border-bottom-color: var(--color-gray-300);
    }
  }

  .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__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__label {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    margin-bottom: 0.25rem;
  }

  .session-modal__textarea {
    width: 100%;
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);

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

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

  .session-modal__check-input {
    height: 1rem;
    width: 1rem;
    color: var(--color-red-600);
    border-color: var(--color-gray-300);
    border-radius: var(--radius-sm);

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

  .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-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }


  .session-charge {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
    padding: 1.5rem;
  }

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

  .session-charge__form {
    & > :not(:last-child) {
      margin-block-end: 1rem;
    }
  }

  .session-charge__label {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    margin-bottom: 0.25rem;
  }

  .session-charge__input {
    width: 100%;
    border-radius: var(--radius-md);
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-sm);

    &:focus {
      --focus-ring-color: var(--color-indigo-500);
    }
  }

  .session-charge__hint {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
  }

  .session-charge__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--color-gray-200);

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

  .session-charge__cancel {
    padding-inline: 1rem;
    padding-block: 0.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);

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


  .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-delete__footer {
    background-color: var(--color-gray-50);
    padding-inline: 1rem;
    padding-block: 0.75rem;
  }

  @media (min-width: 40rem) {
    .session-delete__footer {
      display: flex;
      flex-direction: row-reverse;
      padding-inline: 1.5rem;
    }
  }

  .session-delete__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
  }


  .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__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__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__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-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 {
  .current-time-indicator {
    position: absolute;
    left: 0;
    right: 0;
    z-index: var(--z-20);
    pointer-events: none;
  }

  .current-time-indicator__dot {
    position: absolute;
    left: -0.375rem;
    top: -0.375rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radius-full);
    background-color: var(--color-red-500);
  }

  .current-time-indicator__line {
    height: 0.125rem;
    background-color: var(--color-red-500);
  }

  .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;
  }
}