@layer components {
  /* Location Tree
  /* ======================================================================== */

  .location-tree {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  /* Section - collapsible group per section_type
  /* ------------------------------------------------------------------------ */

  .location-tree__section {
    background-color: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 0.5em;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .location-tree__section-header {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 700;
    gap: 0.5ch;
    justify-content: space-between;
    list-style: none;
    padding: var(--block-space) var(--inline-space);
    user-select: none;
  }

  .location-tree__section-header::-webkit-details-marker {
    display: none;
  }

  .location-tree__section[open] > .location-tree__section-header {
    border-block-end: 1px solid var(--color-ink-lighter);
  }

  .location-tree__section-title {
    font-size: var(--text-medium);
  }

  .location-tree__section-meta {
    align-items: center;
    display: flex;
    gap: 0.75ch;
  }

  .location-tree__count {
    background-color: var(--color-ink-lightest);
    border-radius: 1em;
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-weight: 600;
    min-inline-size: 1.75em;
    padding: 0.1em 0.5em;
    text-align: center;
  }

  .location-tree__section-meta .icon--chevron-right {
    display: inline-block;
    transition: rotate 150ms ease-out;
  }

  .location-tree__section[open] .location-tree__section-meta .icon--chevron-right {
    rotate: 90deg;
  }

  /* Section body & footer
  /* ------------------------------------------------------------------------ */

  .location-tree__section-body {
    padding-block: var(--block-space-half);
  }

  .location-tree__section-footer {
    border-block-start: 1px solid var(--color-ink-lighter);
    padding: var(--block-space-half) var(--inline-space);
  }

  .location-tree__empty {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin: 0;
    padding: var(--block-space-half) var(--inline-space);
  }

  /* Tree list - recursive nested <ul>
  /* ------------------------------------------------------------------------ */

  .location-tree__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Tree node
  /* ------------------------------------------------------------------------ */

  .location-tree__node {
    position: relative;
  }

  /* Collapsible node <details> wrapper
  /* ------------------------------------------------------------------------ */

  .location-tree__node-details {
    /* Reset native <details> marker */
  }

  .location-tree__node-details > summary {
    list-style: none;
  }

  .location-tree__node-details > summary::-webkit-details-marker {
    display: none;
  }

  /* Toggle chevron for expandable nodes */

  .location-tree__toggle {
    align-items: center;
    color: var(--color-ink-medium);
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--text-x-small);
    justify-content: center;
    min-inline-size: 1.25rem;
    transition: rotate 150ms ease-out;
  }

  .location-tree__node-details[open] > summary .location-tree__toggle {
    rotate: 90deg;
  }

  /* Spacer keeps leaf nodes aligned with expandable siblings */

  .location-tree__toggle-spacer {
    display: inline-block;
    flex-shrink: 0;
    min-inline-size: 1.25rem;
  }

  /* Tree row - the visible content of each node
  /* ------------------------------------------------------------------------ */

  .location-tree__row {
    align-items: center;
    display: flex;
    gap: 1ch;
    min-block-size: 2.5rem;
    padding-block: 0.25rem;
    padding-inline-start: calc(var(--depth, 0) * 1.5rem + var(--inline-space));
    padding-inline-end: var(--inline-space);
  }

  summary.location-tree__row {
    cursor: pointer;
  }

  .location-tree__row:hover {
    background-color: var(--color-ink-lightest);
  }

  .location-tree__node + .location-tree__node > .location-tree__row,
  .location-tree__node + .location-tree__node > .location-tree__node-details > .location-tree__row {
    border-block-start: 1px solid var(--color-ink-lightest);
  }

  .location-tree__code {
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 700;
    white-space: nowrap;
  }

  .location-tree__name {
    color: var(--color-ink-dark);
    flex: 1 1 auto;
    font-size: var(--text-small);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .location-tree__inflow-marker {
    color: var(--color-positive);
    font-size: 0.5rem;
    line-height: 1;
    flex: 0 0 auto;
  }

  .location-tree__weaning-location {
    color: var(--color-ink-medium);
    font-family: var(--font-mono);
    font-size: var(--text-x-small);
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Tree connector lines
  /* ------------------------------------------------------------------------ */

  /* Vertical + horizontal branch lines */
  .location-tree__list .location-tree__list .location-tree__row::before {
    border-block-end: 1px solid var(--color-ink-light);
    border-inline-start: 1px solid var(--color-ink-light);
    content: "";
    block-size: 50%;
    inline-size: 0.75rem;
    inset-block-start: 0;
    inset-inline-start: calc((var(--depth, 0) - 1) * 1.5rem + var(--inline-space) + 0.35rem);
    pointer-events: none;
    position: absolute;
  }

  /* Vertical continuation line for non-last siblings */
  .location-tree__list .location-tree__list .location-tree__node:not(:last-child)::after {
    border-inline-start: 1px solid var(--color-ink-light);
    content: "";
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-start: calc((var(--depth, 0) - 1) * 1.5rem + var(--inline-space) + 0.35rem);
    pointer-events: none;
    position: absolute;
  }

  /* Last child: only draw line to the middle (the branch point) */
  .location-tree__list .location-tree__list .location-tree__node:last-child::after {
    border-inline-start: 1px solid var(--color-ink-light);
    content: "";
    inset-block-start: 0;
    block-size: 50%;
    inset-inline-start: calc((var(--depth, 0) - 1) * 1.5rem + var(--inline-space) + 0.35rem);
    pointer-events: none;
    position: absolute;
  }

  /* Row actions (add-child + chevron link)
  /* ------------------------------------------------------------------------ */

  .location-tree__row-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.25ch;
    margin-inline-start: auto;
  }

  .location-tree__add-child {
    align-items: center;
    border-radius: 0.25em;
    color: var(--color-ink-medium);
    display: inline-flex;
    font-size: var(--text-small);
    justify-content: center;
    min-block-size: 2rem;
    min-inline-size: 2rem;
    text-decoration: none;
    transition: color 100ms ease-out, background-color 100ms ease-out;
  }

  .location-tree__add-child:hover {
    background-color: var(--color-ink-lightest);
    color: var(--color-link);
  }

  .location-tree__link {
    align-items: center;
    color: var(--color-ink-medium);
    display: inline-flex;
    font-size: var(--text-large);
    justify-content: center;
    line-height: 1;
    min-block-size: 2rem;
    min-inline-size: 2rem;
    text-decoration: none;
    transition: color 100ms ease-out;
  }

  .location-tree__link:hover {
    color: var(--color-link);
  }

  /* Search results - flat list mode
  /* ------------------------------------------------------------------------ */

  .location-tree__results {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .location-tree__result {
    align-items: center;
    background-color: var(--color-canvas);
    border-block-end: 1px solid var(--color-ink-lighter);
    display: flex;
    gap: 1ch;
    padding: var(--block-space-half) var(--inline-space);
  }

  .location-tree__result:first-child {
    border-block-start: 1px solid var(--color-ink-lighter);
    border-start-start-radius: 0.5em;
    border-start-end-radius: 0.5em;
  }

  .location-tree__result:last-child {
    border-end-start-radius: 0.5em;
    border-end-end-radius: 0.5em;
  }

  .location-tree__result-info {
    display: flex;
    flex: 1 1 auto;
    gap: 1ch;
    min-inline-size: 0;
  }

  .location-tree__result-meta {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 1ch;
  }

  /* Mobile adjustments
  /* ------------------------------------------------------------------------ */

  @media (max-width: 639px) {
    .location-tree__row {
      padding-inline-start: calc(var(--depth, 0) * 1rem + var(--inline-space));
    }

    .location-tree__list .location-tree__list .location-tree__row::before {
      inset-inline-start: calc((var(--depth, 0) - 1) * 1rem + var(--inline-space) + 0.25rem);
      inline-size: 0.5rem;
    }

    .location-tree__list .location-tree__list .location-tree__node:not(:last-child)::after,
    .location-tree__list .location-tree__list .location-tree__node:last-child::after {
      inset-inline-start: calc((var(--depth, 0) - 1) * 1rem + var(--inline-space) + 0.25rem);
    }

    .location-tree__result-meta {
      display: none;
    }
  }
}