@layer modules {

  .tplan-show > *:not(:last-child) {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .tplan-section__heading {
    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: calc(var(--spacing) * 4);
  }

  .tplan-definitions {
    list-style-type: disc;
    list-style-position: inside;
    color: var(--color-gray-800);
  }

  .tplan-definitions > *:not(:last-child) {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .tplan-definitions__item {
    text-wrap: pretty;
  }

  .tplan-table-wrap {
    margin-top: calc(var(--spacing) * 2);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow-x: auto;
  }

  .tplan-table {
    min-width: 100%;
  }

  .tplan-table__head {
    background-color: var(--color-gray-50);
  }

  .tplan-table > .tplan-table__head:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-200);
  }

  .tplan-table__body {
    background-color: var(--color-white);
  }

  .tplan-table__body > tr:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-200);
  }

  .tplan-table__heading {
    padding-block: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 6);
    text-align: left;
    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;
    letter-spacing: var(--tracking-wider);
  }

  .tplan-table__cell {
    padding-block: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .tplan-table__cell--nowrap {
    white-space: nowrap;
  }

  .tplan-table__cell--wrap {
    white-space: normal;
  }

  .tplan-table__cell--strong {
    color: var(--color-gray-900);
  }

  .tplan-table__cell--muted {
    color: var(--color-gray-500);
  }

  .tplan-goal {
    margin-bottom: calc(var(--spacing) * 6);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 4);
    box-shadow: var(--shadow-xs);
  }

  .tplan-goal__title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    color: var(--color-gray-800);
    margin-bottom: calc(var(--spacing) * 2);
  }

  .tplan-objectives > *:not(:last-child) {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .tplan-objective {
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
  }

  .tplan-objective__header {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
  }

  @media (min-width: 40rem) {
    .tplan-objective__header {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: calc(var(--spacing) * 3);
    }
  }

  .tplan-objective__title {
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    text-wrap: pretty;
  }

  .tplan-empty {
    color: var(--color-gray-600);
  }

  .tplan-na {
    color: var(--color-gray-400);
  }
}

@layer modules {
  .estimate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-600);
  }

  .estimate-badge__icon {
    font-size: 0.8125rem;
    color: var(--color-gray-400);
  }

  .estimate-badge__label {
    color: var(--color-gray-500);
  }

  .estimate-badge__time {
    font-variant-numeric: tabular-nums;
  }
}

@layer modules {
  /* Goal collapse state (treatment_plan_form_controller#setCollapsed).
     The expanded chevron points down (.goal-toggle-icon base in notes.css);
     collapsing rotates it to point right. State lives as a single class on
     the goal element. */
  .goal-fields--collapsed .goal-toggle-icon {
    rotate: -90deg;
  }
}