/* A row of the Medications card. */
.medications--row {
  display: flex;
  align-items: flex-start;
  gap: var(--rem-16);
}

.medications--row-date {
  width: 3.5rem;
  flex-shrink: 0;
  font-size: var(--rem-13);
  line-height: var(--rem-22);
  color: var(--text-label);
}

/* The whole row but its menu opens the details. */
.medications--row-link {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--rem-16);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.medications--row-main {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: var(--rem-12);
}

.medications--row-avatar {
  position: relative;
  flex-shrink: 0;

  .avatar i {
    font-size: var(--rem-13);
  }
}

.medications--duplicate-badge {
  position: absolute;
  top: calc(-1 * var(--rem-4));
  right: calc(-1 * var(--rem-4));
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rem-12);
  height: var(--rem-12);
  padding: var(--rem-2);
  border-radius: var(--radius-full);
  background-color: var(--surface-primary);

  .icon i {
    font-size: var(--rem-8);
  }
}

.medications--row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.medications--row-name {
  overflow: hidden;
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: var(--rem-22);
  color: var(--text-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.medications--row-details {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  min-width: 0;
}

.medications--row-origin {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--rem-6);
  font-size: var(--rem-13);
  line-height: var(--rem-21);
  color: var(--text-information);

  .icon {
    width: var(--rem-12);
    min-width: var(--rem-12);
  }

  .icon i {
    font-size: var(--rem-11);
  }
}

.medications--row-divider {
  flex-shrink: 0;
  width: 1px;
  height: var(--rem-16);
  background-color: var(--border-secondary);
}

.medications--row-directions {
  overflow: hidden;
  font-size: var(--rem-13);
  line-height: var(--rem-21);
  color: var(--text-information);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The row's "⋮" sits in the middle of the row. The attribute selectors outrank
   the shared button sizes. */
.medications--row > .medications--menu {
  align-self: center;

  > .buttons--button[data-size][data-has-text][data-has-icon] {
    width: var(--rem-24);
    height: var(--rem-24);
    padding: 0;
  }

  > .buttons--button i {
    font-size: var(--rem-11);
  }
}

/* The row menu, in the row and in the detail modal's header. Its trigger sits
   flush with the row's edge. */
.medications--menu {
  padding: 0;
}

.medications--menu .dropdowns--menu {
  width: 11.625rem;
  border-radius: var(--radius-md);
  outline-color: var(--border-primary);
  box-shadow: var(--shadow-neutral-md);

  .dropdowns--link-menu-item i {
    font-size: var(--rem-13);
  }

  .dropdowns--link-menu-item:not([data-disabled="true"]):hover {
    background-color: var(--surface-secondary);
  }

  /* 8px from one item to the next, with the 1px line in the middle. */
  .dropdowns--menu-divider {
    margin-block: calc(var(--rem-8) / 2 - 0.5px);
  }
}

.medications--status-tag {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--rem-6);
  padding-block: var(--rem-2);
  font-size: var(--rem-12);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: var(--medications-tone);

  &[data-tone="success"] {
    --medications-tone: var(--text-success);
  }

  &[data-tone="warning"] {
    --medications-tone: var(--text-warning);
  }

  &[data-tone="error"] {
    --medications-tone: var(--text-error);
  }

  /* The details modal's tag. */
  &[data-size="md"] {
    font-size: var(--rem-13);
  }
}

.medications--status-dot {
  width: var(--rem-6);
  height: var(--rem-6);
  border-radius: var(--radius-full);
  background-color: var(--medications-tone);
}

/* The chart's Medications card. Its border sits inside its box, as the
   design's does. */
.medications--card {
  outline-offset: -1px;

  .cards--card-header {
    padding: var(--rem-24) var(--rem-24) 0;
  }

  .cards--card-title {
    line-height: var(--rem-24);
  }

  .cards--card-content {
    padding: var(--rem-24);
  }
}

.medications--header-actions {
  display: flex;
  align-items: center;
  gap: var(--rem-16);

  .tabs--div-container {
    min-height: 0;
  }

  .buttons--button .icon {
    width: var(--rem-15);
    min-width: var(--rem-15);
  }

  .buttons--button i {
    font-size: var(--rem-13);
  }
}

/* "Log medication" and "New prescription" sit closer than the switch. */
.medications--header-buttons {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
}

/* The Active | Discontinued and Summary | Providers switches. */
.medications--header-actions .tabs--pill-tab[data-size],
.sidebar--tabs > .tabs--div-container .tabs--pill-tab[data-size] {
  width: auto;
  height: var(--rem-28);
  padding-block: 0;
  border-radius: var(--radius-sm);
  line-height: var(--rem-20);

  &:not([data-active="true"]) {
    background-color: transparent;
  }
}

.medications--empty {
  font-size: var(--rem-14);
  color: var(--text-information);
}

.medications--groups {
  display: flex;
  flex-direction: column;
  gap: var(--rem-24);
}

.medications--group {
  display: flex;
  flex-direction: column;
  gap: var(--rem-16);
}

/* A short rule, the label, then a rule to the end of the row. */
.medications--group-header {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  font-size: var(--rem-13);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: var(--text-subheading);

  &::before,
  &::after {
    content: "";
    height: 1px;
    background-color: var(--border-subtle);
  }

  &::before {
    width: var(--rem-16);
  }

  &::after {
    flex: 1;
  }
}

/* The frame every medication modal shares. */
dialog.modals--main-modal.medications--modal {
  min-width: 0;

  @media screen and (max-width: 576px) {
    width: 100dvw;
  }

  .modals--close-button-new.buttons--button[data-size][data-has-text][data-has-icon],
  .modals--header-back.buttons--button[data-size][data-has-text][data-has-icon] {
    width: var(--rem-20);
    height: var(--rem-20);
    padding: 0;
  }

  .modals--close-button-new i,
  .modals--header-back i {
    font-size: var(--rem-15);
  }

  .modals--header-new:not([data-is-dialog="true"]) .modals--close-button-new {
    top: var(--rem-24);
    right: var(--rem-24);
  }

  /* The header's line sits inside its 64px, as the design's does, so its
     content centers on the full height. */
  .modals--header-new[data-is-dialog="true"] {
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--neutral-100);
  }
}

/* Outlined buttons take the design's border color, inside the button's box. */
:is(.medications--card, .medications--modal) .buttons--button[data-type="outlined"][data-style="neutral"][data-size] {
  outline-color: var(--border-primary);
  outline-offset: -1px;
}

/* The "Medication details" modal. */
dialog.modals--main-modal.medications--details-modal {
  width: 35.25rem;
  outline-color: var(--border-subtle);

  .modals--content {
    padding: var(--rem-16) var(--rem-20) var(--rem-20);
  }

  .tabs--div-container {
    min-height: 0;
  }

  .tabs--container {
    gap: 0;
    border-bottom-color: var(--border-secondary);
  }

  /* The active tab's underline covers the container's line. */
  .tabs--tab {
    height: var(--rem-32);
    margin-bottom: -1px;
    padding: 0 var(--rem-16) var(--rem-12);
    font-size: var(--rem-14);

    &:not([data-active="true"]) {
      color: var(--text-action-neutral);
    }
  }

  .modals--header-actions .buttons--button i {
    font-size: var(--rem-13);
  }
}

.medications--details {
  display: flex;
  flex-direction: column;
  gap: var(--rem-24);
}

.medications--details-name {
  display: flex;
  align-items: center;
  gap: var(--rem-12);
  min-width: 0;

  .avatar .icon {
    width: var(--rem-20);
    min-width: var(--rem-20);
  }

  .avatar i {
    font-size: var(--rem-15);
  }
}

.medications--details-name-text {
  overflow: hidden;
  font-size: var(--rem-16);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: var(--rem-24);
  color: var(--text-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.medications--details-rows {
  display: flex;
  flex-direction: column;
  gap: var(--rem-12);
  padding-top: var(--rem-24);

  .details-row--group[data-size="sm"] .details-row--label {
    width: 10rem;
  }
}

.medications--details-entity {
  display: flex;
  align-items: flex-start;
  gap: var(--rem-8);

  &:has(> .medications--details-entity-name) {
    align-items: center;
  }

  .avatar i {
    font-size: var(--rem-11);
  }
}

.medications--details-entity-text {
  display: flex;
  flex-direction: column;
  gap: var(--rem-4);
}

.medications--details-entity-name {
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: var(--rem-22);
  color: var(--text-action-neutral);
}

.medications--details-entity-detail {
  font-size: var(--rem-13);
  line-height: var(--rem-21);
  color: var(--text-information);
}

/* The Remove / Discontinue / Mark as active dialogs. */
dialog.modals--main-modal.medications--confirm-modal {
  width: 32rem;
  border-radius: var(--radius-md);
  outline: none;
}

.medications--confirm {
  display: flex;
  flex-direction: column;
  gap: var(--rem-16);
}

.medications--confirm-name {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: var(--rem-22);
  color: var(--text-body);

  .avatar i {
    font-size: var(--rem-13);
  }
}

.medications--confirm-question {
  font-size: var(--rem-14);
  line-height: var(--rem-20);
  color: var(--text-body);
}

/* A search result with a second, quieter line. */
.medications--search-option {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--rem-2);
  min-width: 0;
}

.medications--search-option-name,
.medications--search-option-detail {
  overflow: hidden;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.medications--search-option-name {
  font-size: var(--rem-13);
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-action-neutral);
}

.medications--search-option-detail {
  font-size: var(--rem-11);
  font-variation-settings: 'wght' var(--text-regular);
  color: var(--text-information);
}

/* The log / edit medication form. */
dialog.modals--main-modal.medications--form-modal {
  width: 36.25rem;
  border-radius: var(--radius-md);
  outline: none;
}

.medications--form {
  display: flex;
  flex-direction: column;
  gap: var(--rem-24);

  .input-groups--radio-input-group {
    padding-block: var(--rem-4);
  }

  .forms--radio-label {
    line-height: var(--rem-18);
  }
}

.medications--form-nav {
  display: flex;
}

.medications--form-nav-item {
  width: auto;
  height: var(--rem-32);
  padding: 0 var(--rem-12);
  border: none;
  border-radius: var(--radius-md);
  background: none;
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-action-neutral-secondary);
  cursor: pointer;

  &[data-active="true"] {
    background-color: var(--surface-secondary);
    color: var(--text-action-neutral);
  }
}

/* The scrollbar runs down the modal's right edge, to the footer. A sticky
   strip keeps the body's bottom padding clear of the fields as they scroll. */
.medications--form-scroll {
  position: relative;
  max-height: calc(29.875rem + var(--rem-24));
  overflow-y: auto;
  margin: 0 calc(-1 * var(--rem-24)) calc(-1 * var(--rem-24)) 0;
  padding-right: var(--rem-12);

  &::after {
    content: "";
    position: sticky;
    bottom: 0;
    display: block;
    height: var(--rem-24);
    background-color: var(--surface-primary);
  }

  &::-webkit-scrollbar {
    width: var(--rem-12);
  }

  &::-webkit-scrollbar-track {
    border: 1px solid var(--neutral-200);
    background-color: var(--neutral-100);
  }

  &::-webkit-scrollbar-thumb {
    border: var(--rem-2) solid transparent;
    border-radius: var(--radius-full);
    background-color: var(--neutral-500);
    background-clip: padding-box;
  }
}

/* The design's line takes no height: 32px from the section above to the line's
   bottom edge, 32px from there to the next section. Its two lines differ. */
.medications--form-divider {
  margin-block: calc(var(--rem-32) - 1px) var(--rem-32);
  border: none;
  border-top: 1px solid var(--border-subtle);

  & ~ & {
    border-top-color: var(--border-primary);
  }
}

.medications--form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--rem-16);

  .search-select--selected-actions .buttons--button[data-size][data-has-text][data-has-icon] {
    width: var(--rem-16);
    height: var(--rem-16);
    padding: 0;
  }

  .search-select--selected-actions i {
    font-size: var(--rem-13);
    color: var(--icon-secondary);
  }

  .search-select--selected-container {
    border: none;
    outline: 1px solid var(--border-secondary);
    outline-offset: -1px;
  }

  .search-select--selected-body .avatar i {
    font-size: var(--rem-11);
  }

  .inputs--custom-search-icon {
    left: var(--rem-16);

    i {
      font-size: var(--rem-15);
    }
  }

  .select .dropdowns--trigger-button {
    span.dropdowns--trigger-label {
      font-size: var(--rem-14);
      color: var(--text-body);
    }

    span.icon[data-chevron="true"] i {
      --fa-style: 900;
      font-size: var(--rem-11);
      color: var(--icon-primary);
    }
  }

  .select:has(> input[type="hidden"][value=""]) span.dropdowns--trigger-label {
    color: var(--text-action-neutral-secondary);
  }

  input[type="number"],
  input[type="date"] {
    height: 2.5rem;
    padding: 0 var(--rem-16);
  }

  textarea {
    display: block;
    height: 5rem;
    padding: var(--rem-8) var(--rem-12);
    font-size: var(--rem-13);
    line-height: var(--rem-17);
  }

  :is(input[type="number"], input[type="date"], textarea):not(:focus, [data-error="true"]) {
    outline-color: var(--border-secondary);
  }
}

.medications--form-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--rem-16);
}

/* Field borders sit inside the field's box, as the design draws them. */
.medications--form-fields,
.medications--merge-modal .modals--content {
  .dropdowns--main-container {
    padding: 0;
  }

  :is(.inputs--custom-search, .dropdowns--trigger-button, input[type="number"], input[type="date"], textarea) {
    outline-offset: -1px;
  }
}

/* Selects and pickers in the medication modals, drawn as the design's Select
   Field and Select Menu. */
:is(.medications--form-fields, .medications--merge-modal .modals--content) {
  .select > .dropdowns--trigger-button,
  .inputs--custom-search:not(:has(input:focus)),
  .search-select--selected-container {
    box-shadow: var(--shadow-neutral-xs);
  }

  /* While its menu is open, the trigger shows the focus ring and its chevron
     keeps pointing down. */
  .select:has(> .dropdowns--menu:not([hidden]):not(.invisible)) > .dropdowns--trigger-button {
    outline-color: var(--border-focus);
    box-shadow: var(--shadow-input);

    span.icon[data-chevron="true"] {
      rotate: 0deg;
    }
  }

  .dropdowns--menu {
    border-radius: var(--radius-md);
    outline-color: var(--border-primary);
    box-shadow: var(--shadow-neutral-md);
  }

  .dropdowns--menu .select--regular-item {
    font-size: var(--rem-13);
    font-variation-settings: 'wght' var(--text-medium);
    color: var(--text-action-neutral);
  }

  .field-search--item-label {
    font-size: var(--rem-13);
    line-height: normal;
  }
}

/* The Medication section's date pairs sit closer than the others. */
[data-section="medication"] .medications--form-pair {
  gap: var(--rem-12);
}

.medications--form-amount {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rem-8);

  [data-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
  }
}

/* A WENO drug's own value in place of the select it locks: the neighbouring
   selects' box, in the disabled-input colors. */
.medications--locked-field {
  height: 2.5rem;
  padding: 0 var(--rem-16);
  overflow: hidden;
  border-radius: var(--radius-sm);
  outline: 1px solid var(--border-secondary);
  outline-offset: -1px;
  background-color: var(--surface-subtle);
  box-shadow: var(--shadow-neutral-xs);
  font-size: var(--rem-14);
  line-height: 2.5rem;
  color: var(--text-disabled);
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: not-allowed;
}

/* A date field drawn like the design's: "MM/DD/YYYY" and a calendar icon. */
.medications--date {
  position: relative;
  display: block;

  input[type="date"] {
    font-size: var(--rem-14);
    line-height: normal;
  }

  input[type="date"]::-webkit-datetime-edit {
    text-transform: uppercase;
  }

  input[type="date"]::-webkit-datetime-edit-month-field,
  input[type="date"]::-webkit-datetime-edit-day-field,
  input[type="date"]::-webkit-datetime-edit-year-field,
  input[type="date"]::-webkit-datetime-edit-text {
    padding: 0;
  }

  &[data-empty="true"] input[type="date"] {
    color: var(--text-placeholder);
  }

  input[type="date"]::-webkit-calendar-picker-indicator {
    width: var(--rem-12);
    height: var(--rem-12);
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }

  > .icon {
    position: absolute;
    top: 50%;
    right: var(--rem-16);
    transform: translateY(-50%);

    i {
      font-size: var(--rem-13);
    }
  }
}

/* A small on/off switch around a checkbox. */
.medications--toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--rem-8);
  margin-top: var(--rem-8);
  font-size: var(--rem-14);
  line-height: var(--rem-18);
  color: var(--text-body);
  cursor: pointer;

  input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
}

.medications--toggle-track {
  position: relative;
  width: var(--rem-32);
  height: var(--rem-16);
  border-radius: var(--radius-full);
  background-color: var(--neutral-300);
  transition: background-color 0.2s ease-in-out;

  &::before {
    content: "";
    position: absolute;
    top: var(--rem-2);
    left: var(--rem-2);
    width: var(--rem-12);
    height: var(--rem-12);
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    transition: transform 0.2s ease-in-out;
  }
}

.medications--toggle input:checked + .medications--toggle-track {
  background-color: var(--surface-action);

  &::before {
    transform: translateX(var(--rem-16));
  }
}

.medications--toggle input:focus-visible + .medications--toggle-track {
  outline: 2px solid var(--border-focus);
}

/* The sidebar's Summary | Providers switch and its Medications section. */
.sidebar--tabs > .tabs--div-container {
  min-height: 0;
  margin-bottom: var(--rem-16);
}

.medications--sidebar {
  .searchable-list {
    gap: var(--rem-8);
  }

  .searchable-list--top-row > .buttons--button i {
    font-size: var(--rem-11);
    color: var(--text-action-neutral);
  }

  .searchable-list--collapse-button.buttons--button[data-size][data-has-text][data-has-icon] {
    width: var(--rem-10);
    height: var(--rem-10);
    padding: 0;

    i {
      font-size: var(--rem-9);
    }
  }

  .searchable-list--items-container {
    gap: var(--rem-4);
  }

  .expansible-list-item--toggle-button.buttons--button[data-size][data-has-text][data-has-icon] {
    width: var(--rem-10);
    height: var(--rem-10);
    padding: 0;

    i {
      font-size: var(--rem-9);
    }
  }

  .expansible-list-item--first-row-content {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .expansible-list-item--second-row {
    padding-left: var(--rem-18);
  }

  .searchable-list--footer {
    display: flex;
    margin-top: calc(-1 * var(--rem-4));
  }
}

.medications--sidebar-name {
  display: block;
  overflow: hidden;
  font-size: var(--rem-13);
  line-height: var(--rem-21);
  color: var(--text-action-neutral);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.medications--sidebar-directions {
  font-size: var(--rem-12);
  color: var(--text-information);
}

.medications--sidebar-more {
  display: inline-flex;
  align-items: center;
  gap: var(--rem-4);
  padding-left: var(--rem-18);
  font-size: var(--rem-12);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: var(--rem-21);
  color: var(--text-action-neutral-tertiary);
  text-decoration: none;

  .icon i {
    font-size: var(--rem-9);
  }
}

/* The "Potential duplicate" banner in the detail modal. */
.medications--duplicate-banner {
  display: flex;
  align-items: center;
  gap: var(--rem-24);
  padding: var(--rem-12);
  border-radius: var(--radius-md);
  outline: 1px solid var(--border-warning);
  outline-offset: -1px;
  background-color: var(--surface-warning);
}

.medications--duplicate-banner-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--rem-2);
}

.medications--duplicate-banner-title {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: var(--text-warning);

  .icon {
    width: var(--rem-20);
    min-width: var(--rem-20);
  }

  .icon i {
    font-size: var(--rem-15);
  }
}

.medications--duplicate-banner-message {
  padding-left: var(--rem-28);
  font-size: var(--rem-13);
  line-height: 1.4;
  color: var(--text-warning);
}

/* The reconcile duplicates modals. */
dialog.modals--main-modal.medications--merge-modal {
  width: 40rem;
  border-radius: var(--radius-md);
  outline-color: var(--border-secondary);

  /* Step two's frame has no border. */
  &:has(.modals--header-back) {
    outline: none;
  }

  /* The line under the header sits inside its padding, as the design's does. */
  .modals--header-new:not([data-is-dialog="true"]) {
    padding: var(--rem-24) var(--rem-24) var(--rem-16);
    box-shadow: inset 0 -1px 0 var(--neutral-100);

    h5 {
      line-height: 1;
      color: var(--text-heading);
    }

    /* The text stops short of the close button. */
    .modals--header-text-container {
      gap: var(--rem-8);
      padding-right: calc(var(--rem-20) + var(--rem-4));
    }
  }

  &:has(.modals--header-new:not([data-is-dialog="true"])) .modals--content {
    padding-top: var(--rem-16);
  }

  .input-groups--label {
    line-height: var(--rem-22);
  }

  .select .dropdowns--trigger-button span.dropdowns--trigger-label {
    font-size: var(--rem-14);
    color: var(--text-body);
  }

  .select .dropdowns--trigger-button span.icon[data-chevron="true"] i {
    --fa-style: 900;
    font-size: var(--rem-13);
  }
}

/* The picked duplicate's avatar leads the trigger once a record is picked. */
.medications--merge-modal .select {
  span.dropdowns--trigger-label {
    flex: 1;
    text-align: left;
  }

  .medications--merge-duplicate-avatar {
    display: none;

    .avatar i {
      font-size: var(--rem-9);
    }
  }

  &:has(> input[name="duplicate_id"]:not([value=""])) .medications--merge-duplicate-avatar {
    display: flex;
  }
}

.medications--merge-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  height: var(--rem-32);
  margin-bottom: var(--rem-4);
  padding-inline: var(--rem-8);

  /* The line spans the menu's full width, right under the search row. */
  &::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--rem-4));
    bottom: -1px;
    left: calc(-1 * var(--rem-4));
    height: 1px;
    background-color: var(--border-primary);
  }

  .icon i {
    font-size: var(--rem-13);
  }

  input[type="search"] {
    height: auto;
    padding: 0;
    outline: none;
    box-shadow: none;
    font-size: var(--rem-13);
    line-height: var(--rem-17);
  }
}

.select--regular-item.medications--merge-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--rem-8);
  min-height: var(--rem-32);

  .avatar i {
    font-size: var(--rem-9);
  }

  /* Clicks land on the option itself, which carries its value. */
  * {
    pointer-events: none;
  }
}

.medications--merge-option-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--rem-2);
  min-width: 0;
  text-align: left;
}

.medications--merge-option-name {
  font-size: var(--rem-13);
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-action-neutral);
}

.medications--merge-option-detail {
  font-size: var(--rem-11);
  color: var(--text-information);
}

.medications--merge {
  display: flex;
  flex-direction: column;
  gap: var(--rem-16);
}

.medications--merge-intro {
  font-size: var(--rem-14);
  line-height: var(--rem-22);
  color: var(--text-subheading);
}

.medications--merge-columns,
.medications--merge-row {
  display: grid;
  grid-template-columns: 8rem 1fr 1fr;
}

.medications--merge-record {
  display: flex;
  flex-direction: column;
  gap: var(--rem-10);
  min-width: 0;
  padding: var(--rem-16) var(--rem-20);

  &:first-of-type {
    box-shadow: inset 1px 0 0 var(--neutral-200), inset -1px 0 0 var(--neutral-200);
  }
}

.medications--merge-record-label {
  font-size: var(--rem-12);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: var(--text-label);
}

.medications--merge-record-name {
  display: flex;
  align-items: flex-start;
  gap: var(--rem-8);
  min-width: 0;
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: var(--text-heading);

  .avatar i {
    font-size: var(--rem-11);
  }

  span:last-child {
    overflow: hidden;
    font-size: inherit;
    font-variation-settings: inherit;
    line-height: inherit;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* The table's lines are drawn inside the cells, as the design's are, so they
   add no height. */
.medications--merge-section {
  box-shadow: inset 0 1px 0 var(--border-subtle);

  summary {
    display: flex;
    align-items: center;
    gap: var(--rem-12);
    padding-block: var(--rem-16);
    list-style: none;
    cursor: pointer;
  }

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

  &[open] summary {
    box-shadow: inset 0 -1px 0 var(--border-subtle);
  }

  &[open] .medications--merge-chevron {
    transform: rotate(90deg);
  }

  summary .medications--merge-chevron {
    width: var(--rem-16);
    min-width: var(--rem-16);
    height: var(--rem-16);
  }

  .medications--merge-chevron i {
    font-size: var(--rem-13);
  }
}

.medications--merge-section-title {
  flex: 1;
  font-size: var(--rem-15);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: var(--text-heading);
}

.medications--merge-tag {
  padding: var(--rem-2) var(--rem-4);
  border-radius: var(--radius-xs);
  background-color: var(--warning-50);
  font-size: var(--rem-12);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: var(--text-warning);
}

.medications--merge-label {
  min-height: var(--rem-44);
  padding-top: var(--rem-12);
  box-shadow: inset -1px 0 0 var(--border-subtle), inset 0 -1px 0 var(--border-subtle);
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: var(--rem-22);
  color: var(--text-label);
}

.medications--merge-choice {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  padding: var(--rem-12) var(--rem-16);
  font-size: var(--rem-14);
  line-height: 1.4;
  color: var(--text-body);
  box-shadow: inset 0 -1px 0 var(--border-subtle);
  cursor: pointer;

  .medications--merge-label + & {
    box-shadow: inset -1px 0 0 var(--border-subtle), inset 0 -1px 0 var(--border-subtle);
  }

  span {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }

  &:has(input:checked) {
    background-color: var(--primary-50);
  }
}

.medications--merge-empty {
  padding-block: var(--rem-16);
  font-size: var(--rem-14);
  color: var(--text-information);
}

/* The Activity tab. The days are drawn by medication_activity_controller.js. */
.medications--activity {
  display: flex;
  flex-direction: column;
  gap: var(--rem-18);
  padding-top: var(--rem-24);
}

.medications--activity-day {
  display: flex;
  flex-direction: column;
  gap: var(--rem-12);
}

.medications--activity-date {
  font-size: var(--rem-13);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: var(--text-label);
}

.medications--activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--rem-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.medications--activity-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  min-height: var(--rem-20);

  .avatar i {
    font-size: var(--rem-11);
  }

  /* The line joining one avatar to the next within a day. */
  &:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--rem-20) + var(--rem-2));
    left: calc(var(--rem-10) - 0.5px);
    width: 1px;
    height: var(--rem-8);
    background-color: var(--border-secondary);
  }
}

.medications--activity-text {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--rem-4);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.medications--activity-actor {
  overflow: hidden;
  font-size: var(--rem-13);
  font-variation-settings: 'wght' var(--text-medium);
  line-height: 1.2;
  color: var(--text-action-neutral);
  text-overflow: ellipsis;
}

.medications--activity-verb {
  overflow: hidden;
  font-size: var(--rem-13);
  line-height: 1.4;
  color: var(--text-information);
  text-overflow: ellipsis;
}

.medications--activity-end {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--rem-12);
}

.medications--activity-time {
  font-size: var(--rem-13);
  line-height: 1.4;
  color: var(--text-information);
}

.medications--activity-divider {
  width: 1px;
  height: var(--rem-16);
  background-color: var(--border-secondary);
}

/* Retry: the design's small accent-outlined button, also on a pharmacy
   message's Submission row. The extra [data-style] matches the
   outlined-button rule's specificity above, so this one, coming after it,
   wins instead of losing to its grey outline. */
.medications--activity-retry .buttons--button[data-type="outlined"][data-style="neutral"][data-size="xs"],
.pharmacy-messages--reply-action .buttons--button[data-type="outlined"][data-style="neutral"][data-size="xs"] {
  outline-color: var(--primary-300);
  outline-offset: -1px;
  color: var(--text-action);
  box-shadow: 0 2px 3px -2px rgb(38 162 127 / 20%);
}