/* ============================================
   List item — a row in <xm-list>.

   Generalizes the shipped <xm-sidebar-item> desk-row pattern (FR-156):
   8px radius, surface-container-lowest hover/active, short3 background
   transition, on-surface / on-surface-variant ink — into a reusable
   surface* row with leading / body (title + optional secondary) /
   trailing slots.

   Lives on the surface* desk family (AD-13): primary ink
   --md-sys-color-on-surface, secondary --md-sys-color-on-surface-variant.
   Selected adds a coral leading indicator + a soft selected background;
   selection is conveyed by the indicator + aria-selected, never by color
   alone (NFR-15). State changes are real token swaps, not filter/opacity.
   ============================================ */

.list-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  position: relative;
  transition:
    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.list-item:focus { outline: none; }

/* ---------- Hover / active (shared with sidebar-item) ---------- */
.list-item:hover,
.list-item.is-hover {
  background: var(--md-sys-color-surface-container-lowest);
}

/* ---------- Selected — coral leading indicator + soft fill ---------- */
.list-item--selected {
  background: var(--md-sys-color-surface-container-low);
}
.list-item--selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
}
.list-item--selected .list-item__title {
  color: var(--md-sys-color-on-surface);
}

/* ---------- Disabled — reduced emphasis, no hover ---------- */
.list-item--disabled {
  cursor: not-allowed;
  color: var(--xm-color-on-surface-disabled);
}
.list-item--disabled:hover,
.list-item--disabled.is-hover {
  background: transparent;
}

/* ---------- Leading / body / trailing ---------- */
.list-item__leading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--md-sys-color-on-surface-variant);
}
.list-item__leading.is-empty { display: none; }

.list-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.list-item__title {
  font-family: var(--md-sys-typescale-title-small-font);
  font-size: var(--md-sys-typescale-title-small-size);
  font-weight: 500;
  line-height: 1.25;
  color: var(--md-sys-color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item__secondary {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.35;
  color: var(--md-sys-color-on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-item__secondary.is-empty { display: none; }

.list-item__trailing {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--md-sys-color-on-surface-variant);
}
.list-item__trailing.is-empty { display: none; }

/* Dark theme — like sidebar-item, push the resting title into gray so a
   hovered/selected row's brighter title pops as the active state. */
[data-theme="dark"] .list-item:not(.list-item--selected):not(:hover):not(.is-hover) .list-item__title {
  color: var(--md-sys-color-on-surface-variant);
}