@scope (.notes-page) {
  :scope {
    --notes-card: var(--color-surface-raised);
    --notes-ink: var(--color-text-heading);
    --notes-mute: var(--color-text-secondary);
    --notes-faint: var(--color-text-muted);
    --notes-line: var(--color-border);
    --notes-overdue: var(--color-error);
    --notes-today: var(--color-warning);
    --notes-upcoming: var(--color-info);
    --notes-undated: var(--color-text-muted);
    --notes-done: var(--color-success);
    --notes-high: var(--color-error);
    --notes-medium: var(--color-warning);
    --notes-low: var(--color-info);

    --_border: var(--color-border-muted);
    --_ink: var(--color-text-heading);

    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    height: auto;
    min-height: 0;
    container-type: inline-size;
  }

  .list-page__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    flex: none;
    min-height: auto;
    overflow: visible;
  }

  .notes-page__masthead {
    flex-shrink: 0;
    padding-block: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--_border);
  }

  .notes-page__eyebrow {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
  }

  .notes-page__title {
    margin-top: var(--space-xs);
    color: var(--_ink);
    font-size: clamp(var(--text-heading-2), 3vw, var(--text-heading-1));
    font-weight: var(--font-semibold);
  }

  .notes-page__thesis {
    max-inline-size: 46rem;
    margin-top: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--text-body);
  }

  .notes-page__controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .notes-page__toolbar {
    flex-wrap: wrap;
    padding-bottom: 0;
  }

  .notes-page__new {
    white-space: nowrap;
  }

  .notes-page__tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(5.75rem, 1fr));
    border-block-end: 1px solid var(--notes-line);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .notes-page__status-link {
    --notes-tab-accent: var(--notes-undated);

    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    min-block-size: 2.75rem;
    padding: var(--space-sm) var(--space-md);
    color: var(--notes-mute);
    font-size: var(--text-body-sm);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    text-decoration: none;
    text-box: trim-both cap alphabetic;
    box-shadow: inset 0 -2px 0 transparent;
    transition:
      color 0.16s ease,
      box-shadow 0.16s ease;
  }

  .notes-page__status-link[data-status="open"] { --notes-tab-accent: var(--color-primary); }
  .notes-page__status-link[data-status="overdue"] { --notes-tab-accent: var(--notes-overdue); }
  .notes-page__status-link[data-status="today"] { --notes-tab-accent: var(--notes-today); }
  .notes-page__status-link[data-status="completed"] { --notes-tab-accent: var(--notes-done); }
  .notes-page__status-link[data-status="all"] { --notes-tab-accent: var(--notes-ink); }

  .notes-page__status-link:hover {
    color: var(--notes-ink);
    text-decoration: none;
  }

  .notes-page__status-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -2px;
    z-index: 1;
  }

  .notes-page__status-link[aria-current="page"] {
    color: var(--notes-ink);
    box-shadow: inset 0 -2px 0 var(--notes-tab-accent);
  }

  .notes-page__status-count {
    font-variant-numeric: tabular-nums;
    color: color-mix(in oklab, currentColor 68%, transparent);
    font-weight: var(--font-medium);
  }

  .notes-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .notes-group__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--notes-mute);
  }

  .notes-group__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: var(--radius-full);
    background: var(--notes-undated);
    flex-shrink: 0;
  }

  .notes-group--overdue { --notes-group-accent: var(--notes-overdue); }
  .notes-group--today { --notes-group-accent: var(--notes-today); }
  .notes-group--upcoming { --notes-group-accent: var(--notes-upcoming); }
  .notes-group--undated { --notes-group-accent: var(--notes-undated); }
  .notes-group--completed { --notes-group-accent: var(--notes-done); }

  .notes-group--overdue .notes-group__dot,
  .notes-group--today .notes-group__dot,
  .notes-group--upcoming .notes-group__dot,
  .notes-group--undated .notes-group__dot,
  .notes-group--completed .notes-group__dot {
    background: var(--notes-group-accent);
  }

  .notes-group__title {
    margin: 0;
    color: var(--notes-mute);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-widest);
    line-height: 1;
    text-transform: uppercase;
  }

  .notes-group__count {
    color: var(--notes-faint);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }

  .notes-group__count::after {
    content: " ·";
  }

  .notes-page__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: 0.85rem;
    align-items: start;
  }

  .notes-page__empty {
    margin: 0;
    padding: var(--space-xl);
    color: var(--notes-mute);
    background: var(--notes-card);
    border: 1px solid var(--notes-line);
    border-radius: var(--radius-xl);
  }

  .note-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    padding: 0.95rem 1rem 0.85rem;
    color: var(--notes-ink);
    background: var(--notes-card);
    border: 1px solid var(--notes-line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }

  .note-card--note-1 { box-shadow: inset 3px 0 0 var(--color-note-1), var(--shadow-xs); }
  .note-card--note-2 { box-shadow: inset 3px 0 0 var(--color-note-2), var(--shadow-xs); }
  .note-card--note-3 { box-shadow: inset 3px 0 0 var(--color-note-3), var(--shadow-xs); }
  .note-card--note-4 { box-shadow: inset 3px 0 0 var(--color-note-4), var(--shadow-xs); }
  .note-card--note-5 { box-shadow: inset 3px 0 0 var(--color-note-5), var(--shadow-xs); }
  .note-card--note-6 { box-shadow: inset 3px 0 0 var(--color-note-6), var(--shadow-xs); }

  .note-card--done .note-card__title {
    color: var(--notes-mute);
    text-decoration: line-through;
  }

  .note-card--theirs {
    background: var(--color-surface-muted);
    box-shadow: none;
  }

  .note-card--theirs.note-card--note-1 { box-shadow: inset 3px 0 0 var(--color-note-1); }
  .note-card--theirs.note-card--note-2 { box-shadow: inset 3px 0 0 var(--color-note-2); }
  .note-card--theirs.note-card--note-3 { box-shadow: inset 3px 0 0 var(--color-note-3); }
  .note-card--theirs.note-card--note-4 { box-shadow: inset 3px 0 0 var(--color-note-4); }
  .note-card--theirs.note-card--note-5 { box-shadow: inset 3px 0 0 var(--color-note-5); }
  .note-card--theirs.note-card--note-6 { box-shadow: inset 3px 0 0 var(--color-note-6); }

  .note-card--theirs .note-card__title {
    font-weight: var(--font-medium);
  }

  .note-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .note-card__head > form,
  .note-card__aside > form {
    display: contents;
  }

  .note-card__check {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    flex-shrink: 0;
    cursor: pointer;
  }

  .note-card__check--static {
    cursor: default;
  }

  .note-card__check:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .note-card__box {
    width: 1.05rem;
    height: 1.05rem;
    border: 1.5px solid color-mix(in oklab, var(--notes-ink) 28%, transparent);
    border-radius: var(--radius-full);
    background: transparent;
  }

  .note-card__check[aria-pressed="true"] .note-card__box,
  .note-card--done .note-card__check--static .note-card__box {
    border-color: var(--notes-ink);
    background: var(--notes-ink);
    box-shadow: inset 0 0 0 2px var(--notes-card);
  }

  .note-card__copy {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.55rem;
    row-gap: var(--space-sm);
    color: inherit;
    text-decoration: none;
  }

  a.note-card__copy:hover,
  a.note-card__copy:focus {
    color: inherit;
    text-decoration: none;
  }

  a.note-card__copy:hover .note-card__title,
  a.note-card__copy:focus .note-card__title {
    color: var(--notes-ink);
    text-decoration: none;
  }

  .note-card--done a.note-card__copy:hover .note-card__title,
  .note-card--done a.note-card__copy:focus .note-card__title {
    color: var(--notes-mute);
    text-decoration: line-through;
  }

  a.note-card__copy:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .note-card__title {
    margin: 0;
    min-width: 0;
    color: var(--notes-ink);
    font-size: var(--text-body-sm);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    text-wrap: pretty;
  }

  .note-card__priority {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--notes-mute);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1;
    white-space: nowrap;
  }

  .note-card__priority-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 0.08rem;
    background: var(--notes-medium);
  }

  .note-card__priority--high { color: var(--notes-high); }
  .note-card__priority--high .note-card__priority-dot { background: var(--notes-high); }
  .note-card__priority--medium { color: var(--notes-medium); }
  .note-card__priority--medium .note-card__priority-dot { background: var(--notes-medium); }
  .note-card__priority--low { color: var(--notes-low); }
  .note-card__priority--low .note-card__priority-dot { background: var(--notes-low); }

  .note-card__body {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--notes-mute);
    font-size: var(--text-sm);
    line-height: 1.45;
    text-wrap: pretty;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }

  .note-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-block-start: auto;
    margin-inline-start: 1.7rem;
  }

  .note-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    min-width: 0;
    color: var(--notes-faint);
    font-size: var(--text-xs);
    line-height: 1.2;
  }

  .note-card__date--late {
    color: var(--notes-overdue);
    font-weight: var(--font-medium);
  }

  .note-card__tag {
    color: var(--notes-faint);
  }

  .note-card__aside {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
  }

  .note-card__owner {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    color: var(--notes-mute);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1;
  }

  .note-card__owner-name {
    max-width: 6.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .note-card__avatar {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--radius-full);
    color: var(--color-text-on-primary);
    font-size: 0.55rem;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    text-transform: uppercase;
  }

  .note-card__avatar.avatar-color-0 { background: var(--color-info); }
  .note-card__avatar.avatar-color-1 { background: var(--color-success); }
  .note-card__avatar.avatar-color-2 { background: var(--color-warning); }
  .note-card__avatar.avatar-color-3 { background: var(--color-error); }
  .note-card__avatar.avatar-color-4 { background: var(--color-store-4); }
  .note-card__avatar.avatar-color-5 { background: var(--color-store-3); }
  .note-card__avatar.avatar-color-6 { background: var(--color-store-2); }
  .note-card__avatar.avatar-color-7 { background: var(--color-store-1); }

  .note-card__remove {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--notes-faint);
    cursor: pointer;
    opacity: 0;
  }

  .note-card:hover .note-card__remove,
  .note-card:focus-within .note-card__remove {
    opacity: 1;
  }

  .note-card__remove:hover,
  .note-card__remove:focus-visible {
    color: var(--notes-ink);
    background: var(--color-surface-muted);
  }

  .note-card__remove:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    opacity: 1;
  }

  .note-card__remove .icon {
    width: 0.85rem;
    height: 0.85rem;
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .note-card {
      transition: box-shadow 0.2s ease, translate 0.2s ease;
    }

    .note-card:hover,
    .note-card:focus-within {
      translate: 0 -1px;
      box-shadow: var(--shadow-sm);
    }

    .note-card--note-1:hover,
    .note-card--note-1:focus-within { box-shadow: inset 3px 0 0 var(--color-note-1), var(--shadow-sm); }
    .note-card--note-2:hover,
    .note-card--note-2:focus-within { box-shadow: inset 3px 0 0 var(--color-note-2), var(--shadow-sm); }
    .note-card--note-3:hover,
    .note-card--note-3:focus-within { box-shadow: inset 3px 0 0 var(--color-note-3), var(--shadow-sm); }
    .note-card--note-4:hover,
    .note-card--note-4:focus-within { box-shadow: inset 3px 0 0 var(--color-note-4), var(--shadow-sm); }
    .note-card--note-5:hover,
    .note-card--note-5:focus-within { box-shadow: inset 3px 0 0 var(--color-note-5), var(--shadow-sm); }
    .note-card--note-6:hover,
    .note-card--note-6:focus-within { box-shadow: inset 3px 0 0 var(--color-note-6), var(--shadow-sm); }

    .note-card--theirs:hover,
    .note-card--theirs:focus-within {
      translate: none;
      box-shadow: none;
    }

    .note-card--theirs.note-card--note-1:hover,
    .note-card--theirs.note-card--note-1:focus-within { box-shadow: inset 3px 0 0 var(--color-note-1); }
    .note-card--theirs.note-card--note-2:hover,
    .note-card--theirs.note-card--note-2:focus-within { box-shadow: inset 3px 0 0 var(--color-note-2); }
    .note-card--theirs.note-card--note-3:hover,
    .note-card--theirs.note-card--note-3:focus-within { box-shadow: inset 3px 0 0 var(--color-note-3); }
    .note-card--theirs.note-card--note-4:hover,
    .note-card--theirs.note-card--note-4:focus-within { box-shadow: inset 3px 0 0 var(--color-note-4); }
    .note-card--theirs.note-card--note-5:hover,
    .note-card--theirs.note-card--note-5:focus-within { box-shadow: inset 3px 0 0 var(--color-note-5); }
    .note-card--theirs.note-card--note-6:hover,
    .note-card--theirs.note-card--note-6:focus-within { box-shadow: inset 3px 0 0 var(--color-note-6); }
  }

  @container (width < 40rem) {
    .notes-page__tabs {
      grid-template-columns: repeat(5, minmax(4.75rem, 1fr));
    }

    .notes-page__status-link {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.15rem;
      min-block-size: 3rem;
      padding-inline: var(--space-xs);
      font-size: var(--text-xs);
    }
  }

  @media (prefers-contrast: more) {
    .note-card,
    .notes-page__tabs,
    .notes-page__empty {
      outline: 2px solid var(--notes-ink);
    }

    .notes-page__status-link[aria-current="page"] {
      box-shadow: inset 0 -3px 0 var(--notes-tab-accent);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .notes-page__status-link {
      transition: none;
    }

    .note-card__remove {
      opacity: 1;
    }
  }
}

@scope (.note-form) {
  :scope {
    max-width: none;
  }

  .note-form__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .note-form__body .form-field__input {
    min-height: 14rem;
  }

  @media (width >= 48rem) {
    .note-form__fields {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .note-form__title,
    .note-form__body {
      grid-column: 1 / -1;
    }

    .note-form__body .form-field__input {
      min-height: 18rem;
    }
  }
}

@scope (.note-color-picker) {
  :scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
  }

  .note-color-picker__option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
  }

  .note-color-picker__option input {
    accent-color: var(--color-primary);
  }

  .note-color-picker__chip {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px var(--color-border-muted);
  }

  .note-color-picker__option:has(input:checked) .note-color-picker__chip {
    border-color: var(--color-text-heading);
  }

  .note-color-picker__chip--note-1 { background: var(--color-note-1); }
  .note-color-picker__chip--note-2 { background: var(--color-note-2); }
  .note-color-picker__chip--note-3 { background: var(--color-note-3); }
  .note-color-picker__chip--note-4 { background: var(--color-note-4); }
  .note-color-picker__chip--note-5 { background: var(--color-note-5); }
  .note-color-picker__chip--note-6 { background: var(--color-note-6); }

  .note-color-picker__option:has(input:focus-visible) .note-color-picker__chip {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }
}

@scope (.notes-owner-select) {
  @supports (appearance: base-select) {
    :scope {
      appearance: base-select;
    }

    :scope.search-filter__input {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      height: auto;
      min-height: 2.85rem;
      width: 18rem;
      min-width: 18rem;
      max-width: 18rem;
      padding-block: var(--space-sm);
      padding-inline-end: var(--space-md);
      background-image: none;
    }

    :scope button {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      flex: 1;
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: start;
    }

    :scope::picker-icon {
      display: none;
      content: none;
    }

    svg.icon.notes-owner-select__chevron {
      width: 1.5rem;
      height: 1.5rem;
      flex-shrink: 0;
      color: var(--color-text-muted);
      fill: currentColor;
      overflow: visible;
      transition: rotate 0.2s ease;
    }

    :scope:open .notes-owner-select__chevron {
      rotate: 180deg;
    }

    selectedcontent {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.1rem;
      min-width: 0;
    }

    option {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.15rem;
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--radius-md);
      cursor: pointer;
      overflow: hidden;
    }

    option + option {
      margin-block-start: var(--space-xs);
    }

    option:hover,
    option:focus {
      background: var(--color-surface-muted);
    }

    option:checked {
      background: var(--color-surface-muted);
    }

    option::checkmark {
      display: none;
    }

    .notes-owner-option__name {
      color: var(--color-text-heading);
      font-size: var(--text-body-sm);
      font-weight: var(--font-medium);
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }

    .notes-owner-option__meta {
      color: var(--color-text-muted);
      font-size: var(--text-xs);
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }

    @media (prefers-reduced-motion: reduce) {
      svg.icon.notes-owner-select__chevron {
        transition: none;
      }
    }
  }
}

/* Picker and picker-icon live outside @scope (top layer / UA pseudo). */
@supports (appearance: base-select) {
  select.notes-owner-select {
    appearance: base-select;
    anchor-name: --notes-owner-select;
    flex: 0 0 18rem;
    width: 18rem;
    min-width: 18rem;
    max-width: 18rem;
  }

  /* Hide the UA filled triangle so the boxicons chevron in the button is the only arrow. */
  select.notes-owner-select::picker-icon {
    display: none;
    content: none;
  }

  /* Drop the UA position-area grid (`span-inline-end` / single-keyword
     `block-end` both use leftover viewport width) and pin with a named
     fixed anchor so the top-layer picker does not fall to (0, 0). */
  select.notes-owner-select::picker(select) {
    appearance: base-select;
    box-sizing: border-box;
    position: fixed;
    inset: unset;
    position-anchor: --notes-owner-select;
    position-area: none;
    position-try-fallbacks: none;
    top: calc(anchor(bottom) + var(--space-xs));
    left: anchor(left);
    width: 18rem;
    min-width: 18rem;
    max-width: 18rem;
    max-height: min(24rem, calc(100dvh - 8rem));
    margin: 0;
    padding: var(--space-xs);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
  }
}