/* ============================================================
   URBINO · LIST TILE
   Molecule. A row in a list — composes atoms via three slots:
   leading / body (title + subtitle) / trailing.

   Variants:
     default   — row in a card or settings list
     nav       — sidebar / drawer nav item with border-radius
     condensed — manager-dense table-adjacent rows

   The list parent (.u-list) controls dividers and spacing.
   ============================================================ */

/* ---------- LIST CONTAINER ---------- */
.u-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Full-width divider between every tile */
.u-list--divided > * + * { border-top: 1px solid var(--u-divider); }

/* Inset divider — starts after the leading slot */
.u-list--inset > * + * {
  border-top: 1px solid var(--u-divider);
  background-clip: padding-box;
}
.u-list--inset > * + *::before {
  content: "";
  position: absolute;
  inset: -1px auto auto 56px;
  right: 0;
  height: 1px;
  background: var(--u-divider);
}
.u-list--inset > * + * { position: relative; }
.u-list--inset > * + * { border-top: 0; }      /* hide full-width border, draw inset via ::before */


/* ============================================================
   THE TILE
   ============================================================ */

.u-list-tile {
  display: flex;
  align-items: center;
  gap: var(--u-space-3);
  padding: var(--u-list-tile-py) var(--u-list-tile-px);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: var(--u-fg-1);
  font-family: var(--u-font-sans);
  font-size: 14px;
  cursor: default;
  transition: background var(--u-dur-fast) var(--u-ease-out);
  box-sizing: border-box;
}

/* ---------- SIZE / WORLD ---------- */
.u-list-tile--mgr { padding: 8px 12px; gap: 10px; font-size: 14px; }
.u-list-tile--cit { padding: 14px 16px; gap: 14px; font-size: 16px; }
.u-list-tile--lg  { padding: 16px 18px; gap: 14px; font-size: 16px; }

/* ---------- SLOTS ---------- */
.u-list-tile__leading {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.u-list-tile__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.u-list-tile__title {
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
  margin: 0;
  /* truncate by default — one line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u-list-tile__subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--u-fg-3);
  line-height: 1.4;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u-list-tile--cit .u-list-tile__subtitle { font-size: 14px; }

.u-list-tile__trailing {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-2);
  color: var(--u-fg-4);
  font-size: 13px;
}

/* Two-line subtitle override (e.g. body preview in inbox) */
.u-list-tile--multiline .u-list-tile__title { white-space: normal; }
.u-list-tile--multiline .u-list-tile__subtitle {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================
   INTERACTIVE — clickable row (as <button> or <a>)
   ============================================================ */

.u-list-tile--clickable {
  cursor: pointer;
}
.u-list-tile--clickable:hover { background: var(--u-surface-alt); }
.u-list-tile--clickable:active { background: var(--u-surface-sunk); }
.u-list-tile--clickable:focus-visible {
  outline: none;
  background: var(--u-primary-soft);
  box-shadow: inset 0 0 0 2px var(--u-primary);
}

/* SELECTED — "current" row */
.u-list-tile--selected {
  background: var(--u-primary-soft);
  color: var(--u-primary-press);
}
.u-list-tile--selected .u-list-tile__subtitle { color: var(--u-primary-press); opacity: 0.8; }
.u-list-tile--selected.u-list-tile--clickable:hover { background: var(--u-blue-100); }

/* DISABLED */
.u-list-tile--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ============================================================
   VARIANT — NAV
   A list-tile that looks like a sidebar nav item:
   border-radius on each row, no list dividers, smaller padding.
   ============================================================ */

.u-list--nav {
  gap: var(--u-space-1);
  padding: var(--u-space-1);
}
.u-list-tile--nav {
  padding: 7px 10px;
  gap: 10px;
  border-radius: var(--u-radius-sm);
  color: var(--u-fg-2);
  font-size: 14px;
}
.u-list-tile--nav .u-list-tile__title { font-weight: 500; }
.u-list-tile--nav:hover {
  background: var(--u-surface-sunk);
  color: var(--u-fg-1);
}
.u-list-tile--nav.u-list-tile--selected {
  background: var(--u-primary-soft);
  color: var(--u-primary);
}
.u-list-tile--nav.u-list-tile--selected .u-list-tile__title { font-weight: 600; }


/* ============================================================
   VARIANT — CONDENSED (manager dense)
   ============================================================ */

.u-list-tile--condensed {
  padding: 6px 10px;
  gap: 8px;
  font-size: 13px;
}
.u-list-tile--condensed .u-list-tile__title { font-weight: 500; }
.u-list-tile--condensed .u-list-tile__subtitle { font-size: 11px; }


/* ============================================================
   TRAILING CHEVRON — default for clickable rows that navigate
   ============================================================ */

.u-list-tile__chevron {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--u-fg-4);
  font-size: 20px; line-height: 1;
}
.u-list-tile--cit .u-list-tile__chevron { width: 20px; height: 20px; font-size: 22px; }