@layer components {
  .medication-search { display: contents; }
  .medication-search[hidden] { display: none; }
  .medication-search p { margin: 0; overflow-wrap: anywhere; }
  .medication-search-anchor { position: relative; display: block; min-width: 0; width: 100%; }
  .medication-search-anchor > input { width: 100%; }
  .medication-search-anchor:has(.medication-search-clear:not([hidden])) > input { padding-inline-end: 2.75rem; }
  .medication-search-clear { position: absolute; inset-inline-end: 2px; top: 2px; display: grid; place-items: center; width: 40px; height: calc(100% - 4px); min-height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
  @media (hover: hover) and (pointer: fine) {
    .medication-search-clear:hover { background: var(--lilac-soft); color: var(--navy); }
  }
  .medication-search-clear:focus-visible { outline: 2px solid var(--periwinkle); outline-offset: -2px; }
  .medication-search-clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .medication-search-clear[hidden], .medication-search-anchor > input:is(:disabled, [readonly]) ~ .medication-search-clear { display: none; }
  .medication-search-status { color: var(--muted); font-size: .84rem; line-height: 1.5; }
  .medication-search-empty { display: grid; gap: .25rem; padding: .85rem 1rem; border-radius: 8px; background: var(--lilac-soft); color: var(--navy); }
  .medication-search-empty strong { font-size: .95rem; font-weight: 700; }
  .medication-search-status:empty, .medication-search-details:empty { display: none; }
  .medication-result-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; }
  .medication-result-name { font-size: 1rem; font-weight: 700; line-height: 1.4; }
  .medication-result-strength { max-width: 100%; padding: .15rem .4rem; border-radius: 4px; background: var(--lilac-soft); color: var(--navy); font-family: var(--font-mono); font-size: .75rem; font-weight: 400; line-height: 1.5; font-variant-numeric: tabular-nums; }
  .medication-result-form { display: block; margin-top: .3rem; color: var(--muted); font-size: .875rem; font-weight: 400; line-height: 1.45; }
  .medication-search-results .is-active .medication-result-strength { background: var(--surface); }
  @media (hover: hover) and (pointer: fine) {
    .medication-search-results [role="option"]:hover .medication-result-strength { background: var(--surface); }
  }
  .medication-search-details { display: grid; gap: .6rem; min-width: 0; }
  .medication-package-name { font-size: .84rem; font-weight: 600; line-height: 1.5; }
  .medication-catalog-source { display: block; color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
}