@layer components {
  .care-mood { margin-top: 1.5rem; scroll-margin-top: 1rem; }
  .care-mood h2 { font-family: var(--font-sans); font-size: .65rem; font-weight: 400; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .65rem; }
  .care-mood-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
  .care-mood-choice { min-height: 44px; padding: .6rem .25rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: .8rem; cursor: pointer; }
  @media (hover: hover) and (pointer: fine) {
    .care-mood-choice:hover:not(:disabled) { border-color: var(--periwinkle); background: var(--lilac-soft); }
  }
  .care-mood-choice:focus-visible { outline: 2px solid var(--periwinkle); outline-offset: 3px; }
  .care-mood-choice:disabled { cursor: default; }
  .care-mood-choice.is-selected { background: var(--navy); color: white; border-color: var(--navy); }
  @media (hover: hover) and (pointer: fine) {
    .care-mood-choice.is-selected:hover:not(:disabled) { background: var(--navy); color: white; border-color: var(--navy); }
  }
  .care-mood p { margin-top: .5rem; font-size: .75rem; color: var(--muted); }
}