/*
  notes — clinical note views (app/views/notes/).

  Covers the new/edit/show page chrome, the per-type forms (consultation,
  progress, psychotherapy, template, treatment plan), the compact previews
  rendered in patient cards, the diagnosis sub-form, the treatment-plan goal /
  objective / strategy builder, the preset picker dialog, review history, and
  the review-requests index.

  Treatment-plan field styling matches presets.css (the preset CRUD shares the
  identical markup). The rendered note content keeps its vendored `prose` /
  `lexxy-content` classes.
*/

@layer modules {

  .notes-new {
    width: 100%;
    padding-inline: 1rem;
    min-height: 100vh;

    @media (min-width: 48rem) {
      padding-inline: 1.5rem;
    }
  }

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

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

  .notes-page__back {
    margin-bottom: 1rem;
  }

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

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

  .notes-page__heading--spaced {
    margin-bottom: 1.5rem;
  }

  .notes-new__layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    @media (min-width: 64rem) {
      flex-direction: row;
    }
  }

  .notes-new__main {
    flex: 1 1 0%;
  }

  .notes-new__card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
  }

  /* Hidden below xl; the patient-details panel shows alongside the form at xl+ */
  .notes-new__aside {
    display: none;

    @media (min-width: 80rem) {
      display: block;
      width: 33.3333%;
    }
  }

  .notes-new__aside-inner {
    position: sticky;
    top: 0.5rem;
  }

  .notes-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;
    margin-bottom: 1.5rem;
  }

  .notes-show__fallback {
    padding-inline: 1rem;
    padding-block: 1.25rem;

    @media (min-width: 40rem) {
      padding: 1.5rem;
    }
  }

  .notes-show__fallback-text {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
  }

  .notes-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border: 1px solid var(--color-gray-300);
    box-shadow: var(--shadow-xs);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    background-color: var(--color-white);

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

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

  .notes-download__icon {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--color-gray-500);
  }


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

  .note-card__header {
    background-color: var(--color-blue-600);
    color: var(--color-white);
    padding-inline: 1.5rem;
    padding-block: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .note-card__title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-semibold);
  }

  .note-card__actions {
    display: flex;

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

  .note-card__body {
    padding: 1.5rem;
  }

  .note-card__sections {
    & > :not(:last-child) {
      margin-block-end: 1.5rem;
    }
  }

  .note-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: 0.5rem;
  }

  .note-section__title--wide {
    margin-bottom: 1rem;
  }

  .note-diagnosis-table {
    margin-top: 0.5rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .note-diagnosis-table__table {
    min-width: 100%;

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

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

  .note-diagnosis-table__th {
    padding-inline: 1.5rem;
    padding-block: 0.75rem;
    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);
  }

  .note-diagnosis-table__body {
    background-color: var(--color-white);

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

  .note-diagnosis-table__code {
    padding-inline: 1.5rem;
    padding-block: 1rem;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-900);
  }

  .note-diagnosis-table__description {
    padding-inline: 1.5rem;
    padding-block: 1rem;
    white-space: normal;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
  }

  .note-sign {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-200);
  }

  .note-sign__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
  }

  .note-sign__supervisor {
    text-align: left;
  }

  .note-sign__author {
    text-align: right;
    position: relative;
  }

  /* font-family is set inline on the element */
  .note-sign__name {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    margin-bottom: 0.5rem;
  }

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

  .note-sign__role {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-top: 0.25rem;
  }

  /* APPROVED / CHANGES stamp. `hidden` stays a utility on the element so it shows only at lg+. */
  .note-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-width: 4px;
    border-style: solid;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border-radius: var(--radius-sm);
    opacity: 0.8;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
    background-color: var(--color-white-50);
    backdrop-filter: blur(1px);
  }

  .note-stamp--approved {
    rotate: -6deg;
    border-color: var(--color-green-600);
    color: var(--color-green-600);

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

  .note-stamp--changes {
    rotate: -12deg;
    border-color: var(--color-red-600);
    color: var(--color-red-600);
  }

  .note-reviews {
    margin-top: 1.5rem;
    border-top: 1px solid var(--color-gray-200);
    padding-top: 1.5rem;
  }

  .note-reviews__title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    margin-bottom: 1rem;
  }

  .note-reviews__list {
    & > :not(:last-child) {
      margin-block-end: 1.5rem;
    }
  }

  .note-review {
    position: relative;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 1rem;
  }

  .note-review--latest {
    border-left-width: 4px;
    border-left-color: var(--color-blue-500);
  }

  .note-review__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .note-review__reviewer {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }

  .note-review__date {
    display: inline;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);

    @media (min-width: 48rem) {
      display: block;
    }
  }

  .note-review__decision {
    padding-inline: 0.5rem;
    padding-block: 0.25rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .note-review__decision--signed {
    background-color: var(--color-green-100);
    color: var(--color-green-800);
  }

  .note-review__decision--changes {
    background-color: var(--color-yellow-100);
    color: var(--color-yellow-800);
  }

  .note-review__content {
    color: var(--color-gray-700);
    margin-bottom: 1rem;
  }

  .note-supervisor {
    margin-top: 1.5rem;
    border-top: 1px solid var(--color-gray-200);
    padding-top: 1.5rem;
    background-color: var(--color-gray-50);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }

  .note-supervisor__title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    margin-bottom: 1rem;
  }

  .note-supervisor__field {
    margin-bottom: 1rem;
  }

  .note-supervisor__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.5rem;
  }

  .note-supervisor__editor {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-xs);
    min-height: 100px;
    background-color: var(--color-white);

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

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

  .note-supervisor__actions {
    display: flex;
    gap: 0.75rem;
  }

  .note-supervisor__decision {
    color: var(--color-white);
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border-radius: var(--radius-md);
    transition: 0.2s var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:focus {
      outline: 2px solid transparent;
    }
  }

  .note-supervisor__decision--approve {
    background-color: var(--color-green-600);

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

    &:focus-visible {
      --focus-ring-color: var(--color-green-500);
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .note-supervisor__decision--changes {
    background-color: var(--color-yellow-600);

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

    &:focus-visible {
      --focus-ring-color: var(--color-yellow-500);
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .note-request {
    margin-top: 1.5rem;
    border-top: 1px solid var(--color-gray-200);
    padding-top: 1.5rem;
  }

  .note-request__row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .note-request__text {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
    font-style: italic;
  }

  .note-request__date {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-400);
    margin-top: 0.25rem;
  }

  .note-request__cancel {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-red-600);
    border: 1px solid var(--color-red-200);
    background-color: var(--color-red-50);
    padding-inline: 0.75rem;
    padding-block: 0.25rem;
    border-radius: var(--radius-sm);
    transition: 0.2s var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

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


  /* display: contents so the <form>'s fields participate in the parent layout directly */
  .note-form {
    display: contents;
  }

  .note-form__field {
    margin-block: 1.25rem;
  }

  .note-form__field--tight {
    margin-block: 1rem;
  }

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

  .note-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);

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

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

  .note-form__textarea {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    border-radius: var(--radius-md);
    border-color: var(--color-gray-300);

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

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

  .note-form__editor {
    width: 100%;
    margin-top: 0.25rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);

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

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

  .note-form__actions {
    display: inline;
    margin-inline-end: 0.5rem;
  }

  .note-diagnoses {
    margin-block: 1.5rem;
  }

  .note-diagnoses__header {
    margin-bottom: 0.75rem;
  }

  .note-diagnoses__title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    text-wrap: balance;
  }

  /* Class name kept (not BEM) so the Stimulus controller keeps targeting it. */
  .diagnosis-fields {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    align-items: center;
  }

  .note-diagnosis-fields__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);
    margin-bottom: 0.25rem;
  }

  .note-diagnosis-fields__input {
    display: block;
    box-shadow: var(--shadow-xs);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-300);
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;

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

  .note-diagnosis-fields__controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 2rem;
  }

  .note-diagnosis-fields__move {
    color: var(--color-gray-400);

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

  .note-diagnosis-fields__remove {
    color: var(--color-red-400);

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

  .note-diagnosis-fields__icon {
    height: 1.25rem;
    width: 1.25rem;
  }

  .note-status {
    margin-block: 1rem;
    padding: 1rem;
    background-color: var(--color-gray-50);
    border-radius: var(--radius-lg);
  }

  .note-status__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .note-status__checkbox {
    width: 1rem;
    height: 1rem;
    color: var(--color-blue-600);
    border-radius: var(--radius-sm);

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

  .note-status__label {
    color: var(--color-gray-700);
  }

  .note-status__signature {
    margin-left: 0.5rem;
    font-family: var(--font-signature);
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
  }

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


  .note-compact {
    & > :not(:last-child) {
      margin-block-end: 0.5rem;
    }
  }

  .note-compact--sections {
    & > :not(:last-child) {
      margin-block-end: 0.75rem;
    }
  }

  .note-compact__content {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-700);
    /* Tighten lexxy block spacing for the truncated preview */
    --lexxy-content-margin: 0.25rem;
  }

  .note-compact__heading {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: 0.375rem;
  }

  .note-compact__goals {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-700);

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

  .note-compact__goal {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .note-compact__goal-icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-indigo-400);
    flex-shrink: 0;
    margin-top: 0.125rem;
  }


  .compact-note {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, transparent, var(--color-gray-200) 80%);
    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;

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

  .compact-note__header {
    background-image: linear-gradient(to right in oklab, var(--color-gray-50) 0%, var(--color-white) 100%);
    padding-inline: 1rem;
    padding-block: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-gray-100);
  }

  .compact-note__head-text {
    min-width: 0;
    flex: 1 1 0%;
  }

  .compact-note__title {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .compact-note__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.125rem;
  }

  .compact-note__date {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-500);
  }

  .compact-note__dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-300);
  }

  .compact-note__status {
    display: inline-flex;
    align-items: center;
    padding-inline: 0.375rem;
    padding-block: 0.125rem;
    border-radius: 0.25rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
  }

  .compact-note__status--signed {
    background-color: var(--color-emerald-50);
    color: var(--color-emerald-700);
  }

  .compact-note__status--draft {
    background-color: var(--color-amber-50);
    color: var(--color-amber-700);
  }

  .compact-note__view {
    margin-left: 0.75rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-indigo-600);
    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-700);
    }
  }

  .compact-note__view-icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .compact-note__body {
    padding: 1rem;
    max-height: 16rem;
    overflow-y: auto;
  }


  .new-note-dropdown {
    position: relative;
  }

  .new-note-dropdown__plus {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    transition: 0.2s var(--default-transition-timing-function);
    transition-property: transform, translate, scale, rotate;

    .new-note-dropdown__trigger:hover & {
      rotate: 90deg;
    }
  }

  /* Visibility is toggled by `hidden` on the element; resting opacity/scale here are the closed state. */
  .new-note-dropdown__menu {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    padding-block: 0.5rem;
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-200);
    z-index: 50;
    opacity: 0;
    scale: 95%;
    transition: all 0.2s var(--default-transition-timing-function);
  }

  .new-note-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-inline: 1rem;
    padding-block: 0.625rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-700);
    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-indigo-50);
      color: var(--color-indigo-700);
    }
  }

  .new-note-dropdown__badge {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .new-note-dropdown__badge--blue { background-color: var(--color-blue-50); }
  .new-note-dropdown__badge--emerald { background-color: var(--color-emerald-50); }
  .new-note-dropdown__badge--amber { background-color: var(--color-amber-50); }
  .new-note-dropdown__badge--purple { background-color: var(--color-purple-50); }
  .new-note-dropdown__badge--gray { background-color: var(--color-gray-50); }

  .new-note-dropdown__icon {
    width: 1rem;
    height: 1rem;
  }

  .new-note-dropdown__icon--blue { color: var(--color-blue-600); }
  .new-note-dropdown__icon--emerald { color: var(--color-emerald-600); }
  .new-note-dropdown__icon--amber { color: var(--color-amber-600); }
  .new-note-dropdown__icon--purple { color: var(--color-purple-600); }
  .new-note-dropdown__icon--gray { color: var(--color-gray-600); }

  .new-note-dropdown__separator {
    border-top: 1px solid var(--color-gray-100);
    margin-block: 0.5rem;
  }

  .new-note-dropdown__group {
    padding-inline: 1rem;
    padding-block: 0.375rem;
  }

  .new-note-dropdown__group-label {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
  }


  .notes-list__download {
    color: var(--color-blue-600);
    position: relative;
    z-index: 10;

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

  .notes-empty {
    text-align: center;
    padding-block: 3rem;
  }

  .notes-empty__icon-wrap {
    margin-inline: auto;
    height: 3.5rem;
    width: 3.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-violet-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .notes-empty__icon {
    height: 1.75rem;
    width: 1.75rem;
    color: var(--color-violet-400);
  }

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

  .notes-empty__text {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
    max-width: var(--container-xs);
    margin-inline: auto;
  }


  .note-session {
    margin-top: 1rem;
  }

  .note-session__box {
    background-color: var(--color-gray-50);
    padding: 1rem;
    border-radius: var(--radius-lg);
  }

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

  .note-session__line--spaced {
    margin-top: 0.5rem;
  }

  .note-session__label {
    font-weight: var(--font-weight-medium);
  }

  .note-session__empty {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
    font-style: italic;
  }


  .patient-details-card {
    max-width: var(--container-4xl);
    margin-inline: auto;
    margin-block: 1rem;
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .patient-details-card__header {
    position: relative;
    padding-inline: 1.5rem;
    padding-block: 1.25rem;
    background-image: linear-gradient(to right in oklab, var(--color-violet-500) 0%, var(--color-purple-600) 100%);
  }

  .patient-details-card__title {
    position: relative;
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-bold);
    color: #ffffffe6;
    filter: drop-shadow(0 1px 1px var(--color-black-5));
  }

  .patient-details-card__body {
    padding: 1.5rem;

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

  .patient-details-card__grid {
    display: grid;
    gap: 1rem;

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

  .patient-details-card__field {
    background-color: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: 1rem;
    transition: all var(--default-transition-duration) var(--default-transition-timing-function);

    &:hover {
      scale: 1.01;
    }
  }

  .patient-details-card__field-row {
    display: flex;
    align-items: center;
  }

  .patient-details-card__icon-badge {
    padding: 0.5rem;
    border-radius: var(--radius-lg);
    margin-right: 0.75rem;
  }

  .patient-details-card__icon-badge--violet { background-color: var(--color-violet-100); }
  .patient-details-card__icon-badge--purple {
    padding: 1rem;
    background-color: var(--color-purple-100);
  }

  .patient-details-card__field-icon {
    height: 1.25rem;
    width: 1.25rem;
  }

  .patient-details-card__field-icon--violet { color: var(--color-violet-600); }
  .patient-details-card__field-icon--purple { color: var(--color-purple-600); }

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

  .patient-details-card__field-value {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
  }

  .patient-details-card__contact {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1rem;
    border-top: 1px solid var(--color-gray-100);
  }

  .patient-details-card__contact-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;
  }

  .patient-details-card__contact-list {
    & > :not(:last-child) {
      margin-block-end: 0.75rem;
    }
  }

  /* The element keeps a `group` class so the badge/value hover rules below can target it. */
  .patient-details-card__contact-row {
    display: flex;
    align-items: center;
  }

  .patient-details-card__contact-badge {
    padding: 0.5rem;
    background-color: var(--color-blue-50);
    border-radius: var(--radius-lg);
    margin-right: 0.75rem;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

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

  .patient-details-card__contact-badge--shrink {
    flex-shrink: 0;
  }

  .patient-details-card__contact-icon {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--color-green-600);
  }

  .patient-details-card__contact-value {
    color: var(--color-gray-700);
    padding: 0.5rem;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;

    &:is(:where(.group):hover *) {
      color: var(--color-gray-900);
    }
  }

  .patient-details-card__contact-value--break {
    word-break: break-all;
  }


  .review-requests {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
    padding-block: 2rem;

    @media (min-width: 40rem) { max-width: 40rem; }
    @media (min-width: 48rem) { max-width: 48rem; }
    @media (min-width: 64rem) { max-width: 64rem; }
    @media (min-width: 80rem) { max-width: 80rem; }
    @media (min-width: 96rem) { max-width: 96rem; }
  }

  .review-requests__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .review-requests__title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
  }

  .review-requests__empty {
    text-align: center;
    padding-block: 3rem;
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);

    @media (min-width: 40rem) {
      border-radius: var(--radius-lg);
    }
  }

  .review-requests__empty-text {
    color: var(--color-gray-500);
  }


  .tp-section {
    margin-block: 1.5rem;
  }

  .tp-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .tp-section__title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    text-wrap: balance;
  }

  .tp-section__hint {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-500);
    text-wrap: pretty;
  }

  .tp-goals-list {
    counter-reset: goal;
  }

  .tp-add {
    width: 100%;
    margin-top: 0.5rem;
    border-radius: var(--radius-xl);

    &:active {
      scale: 0.96;
    }
  }

  .behavioral-definition-fields {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;

    &:first-child {
      margin-top: 0;
    }
  }

  .behavioral-definition-fields__input {
    display: block;
    flex: 1 1 0%;
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    padding-inline: 0.75rem;
    padding-block: 0.375rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-900);

    &::placeholder {
      color: var(--color-gray-400);
    }

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

  .tp-remove {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    margin: -0.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    color: var(--color-gray-400);

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

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

  .goal-fields {
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-xs);
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    margin-top: 0.5rem;
    counter-increment: goal;

    &:first-child {
      margin-top: 0;
    }
  }

  .goal-fields__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .goal-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin-left: -0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    color: var(--color-gray-500);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: transform, translate, scale, rotate;

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

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

    &:active {
      scale: 0.96;
    }
  }

  .goal-toggle-icon {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: transform, translate, scale, rotate;
  }

  .goal-pill {
    display: inline-flex;
    align-items: center;
    padding-inline: 0.5rem;
    padding-block: 0.125rem;
    border-radius: var(--radius-md);
    background-color: var(--color-indigo-50);
    color: var(--color-indigo-700);
    box-shadow: inset 0 0 0 1px var(--color-indigo-100);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }

  .goal-counter::before {
    content: counter(goal);
  }

  .goal-body {
    padding-left: 1.75rem;
    padding-right: 0.25rem;
    margin-top: 0.25rem;
  }

  .goal-input {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    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-semibold);
    color: var(--color-gray-900);

    &::placeholder {
      font-weight: var(--font-weight-normal);
      color: var(--color-gray-400);
    }

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

  .objectives {
    margin-top: 0.5rem;
    counter-reset: objective;
  }

  .tp-add-sub {
    width: 100%;
    margin-top: 0.75rem;
    padding-block: 0.375rem;
    border: 1px dashed var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: transform, translate, scale, rotate;

    &:hover {
      border-color: var(--color-blue-400);
      background-color: var(--color-white);
      color: var(--color-blue-700);
    }

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

    &:active {
      scale: 0.96;
    }
  }

  .tp-add-sub--strategy {
    margin-top: 0.5rem;

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

  .objective-fields {
    padding-left: 1rem;
    margin-top: 1rem;
    border-left: 2px solid var(--color-gray-200);
    counter-increment: objective;

    &:first-child {
      margin-top: 0.5rem;
    }
  }

  .objective-fields__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
    margin-left: -1rem;
    padding-left: 1rem;
  }

  .objective-fields__eyebrow {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-blue-600);
  }

  .objective-counter::before {
    content: counter(objective);
  }

  .objective-fields__textarea {
    display: block;
    width: 100%;
    resize: vertical;
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    padding-inline: 0.75rem;
    padding-block: 0.375rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-900);

    &::placeholder {
      color: var(--color-gray-400);
    }

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

  .objective-fields__date {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.25rem;
  }

  .objective-fields__date-label {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
  }

  .objective-fields__date-input {
    border-radius: var(--radius-md);
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: 0.5rem;
    padding-block: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);

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

  .strategies {
    margin-top: 0.75rem;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-gray-200);
    padding: 0.5rem;
  }

  .strategies-body {
    & > :not(:last-child) {
      border-bottom: 1px solid var(--color-gray-100);
    }
  }

  .strategy-fields {
    padding-inline: 0.5rem;
    padding-block: 0.5rem;

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

  .strategy-fields__label {
    display: block;
  }

  .strategy-fields__caption {
    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);
    margin-bottom: 0.25rem;
  }

  .strategy-fields__input {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    padding-inline: 0.5rem;
    padding-block: 0.375rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);

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

  .strategy-fields__grid {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.5rem;

    @media (min-width: 48rem) {
      align-items: end;
      grid-template-columns: 1fr 1fr 1fr auto;
    }
  }

  .strategy-fields__grid--undated {
    @media (min-width: 48rem) {
      grid-template-columns: 1fr 1fr auto;
    }
  }

  .strategy-fields__select {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: 0.5rem;
    padding-block: 0.375rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);

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

  .strategy-fields__remove-cell {
    @media (min-width: 48rem) {
      justify-self: end;
    }
  }

  .strategy-fields__remove-desktop {
    @media (min-width: 48rem) {
      display: inline-flex;
    }

    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    color: var(--color-gray-400);

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

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

  .strategy-fields__remove-mobile {
    width: 100%;
    margin-top: 0.25rem;
    padding-block: 0.375rem;
    border: 1px dashed var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: transform, translate, scale, rotate;

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

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

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

    &:active {
      scale: 0.96;
    }
  }

  .tp-icon-base {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
  }

  .tp-icon-sm {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }


  .preset-picker {
    margin-bottom: 1.5rem;
  }

  .preset-picker__trigger-plus {
    color: var(--color-indigo-600);
    font-weight: var(--font-weight-semibold);
  }

  .preset-picker__dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    border-radius: var(--radius-2xl);
    padding: 0;
    width: 100%;
    max-width: var(--container-xl);
    max-height: 85vh;
    overflow: hidden;
    box-shadow: var(--shadow-2xl);

    &::backdrop {
      background-color: #10182866;
    }
  }

  .preset-picker__stage {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
  }

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

  .preset-picker__header--detail {
    justify-content: flex-start;
    gap: 0.75rem;
  }

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

  .preset-picker__title--detail {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .preset-picker__close {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    margin: -0.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    color: var(--color-gray-400);

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

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

  .preset-picker__back {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    margin: -0.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    color: var(--color-gray-500);

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

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

  .preset-picker__list {
    overflow-y: auto;

    & > :not(:last-child) {
      border-bottom: 1px solid var(--color-gray-100);
    }
  }

  .preset-picker__option {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-inline: 1.25rem;
    padding-block: 0.75rem;

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

    &:focus-visible {
      background-color: var(--color-gray-50);
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .preset-picker__option-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }

  .preset-picker__system {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray-500);
    background-color: var(--color-gray-100);
    padding-inline: 0.375rem;
    padding-block: 0.125rem;
    border-radius: 0.25rem;
  }

  .preset-picker__body {
    overflow-y: auto;
    padding-inline: 1.25rem;
    padding-block: 1rem;
    flex: 1 1 0%;

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

  .preset-picker__intro {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-500);
    margin-bottom: 0.75rem;
  }

  .preset-picker__section {
    border-radius: var(--radius-lg);
    border-width: 1px;
    border-style: solid;
    padding: 0.75rem;
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  }

  .preset-picker__section--blank {
    border-color: var(--color-gray-100);
    background-color: var(--color-gray-50-50);
  }

  .preset-picker__section--filled {
    border-color: var(--color-gray-200);
    background-color: var(--color-white);

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

    &:has(input[data-section-checkbox]:checked) {
      border-color: var(--color-blue-300);
      background-color: #eff6ff4d;
    }
  }

  .preset-picker__section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .preset-picker__section-checkbox {
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);

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

  .preset-picker__section-name {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }

  .preset-picker__section-name--blank {
    color: var(--color-gray-400);
  }

  .preset-picker__empty-tag {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-gray-400);
  }

  .preset-picker__preview {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-600);
  }

  .preset-picker__text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    white-space: pre-wrap;
  }

  .preset-picker__items {
    & > :not(:last-child) {
      margin-block-end: 0.125rem;
    }
  }

  .preset-picker__item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 0.25rem;
    padding-inline: 0.375rem;
    padding-block: 0.125rem;
    cursor: pointer;

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

  .preset-picker__item-checkbox {
    margin-top: 0.25rem;
    border-radius: 0.25rem;
    border-color: var(--color-gray-300);
    color: var(--color-blue-600);

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

  .preset-picker__item-content {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .preset-picker__code-id {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
  }

  .preset-picker__code-desc {
    color: var(--color-gray-600);
  }

  .preset-picker__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-inline: 1.25rem;
    padding-block: 0.75rem;
    border-top: 1px solid var(--color-gray-100);
    background-color: var(--color-gray-50);
  }

  .preset-picker__footer--list {
    justify-content: flex-start;
  }

  .preset-picker__manage {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }

  .preset-picker__cancel {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    background-color: var(--color-white);
    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);
    color: var(--color-gray-700);

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

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

  .preset-picker__apply {
    border-radius: var(--radius-lg);
    background-color: var(--color-blue-600);
    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);
    color: var(--color-white);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: transform, translate, scale, rotate;

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

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

    &:active {
      scale: 0.96;
    }
  }
}