/* Shared entity list shell */
.entity-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

.entity-list__titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Same band as `.pane-chrome` so `workspace-layout::after` lands on the
     bottom edge — never through the title, never as a second rule. */
  box-sizing: border-box;
  flex: 0 0 var(--pane-chrome-height);
  height: var(--pane-chrome-height);
  max-height: var(--pane-chrome-height);
  min-height: 0;
  /* control-h (7u) + space-1 Y pad ×2 = pane-chrome-height (9u). */
  padding: var(--space-1) var(--list-pad-x);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: var(--bg);
  overflow: hidden;
}

.entity-list__titlebar.is-creating {
  flex-basis: auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

/* Column-root lists own the chrome band — defer the hairline to
   `workspace-layout::after` (same contract as `.pane-chrome`). Nested
   lists keep their own titlebar border. */
.workspace-layout .brands-scroll > .entity-list > .entity-list__titlebar,
.workspace-layout .subs-scroll > .entity-list > .entity-list__titlebar,
.workspace-layout .brand-home-section > .entity-list > .entity-list__titlebar,
.workspace-layout .owner-members > .entity-list > .entity-list__titlebar {
  border-bottom-color: transparent;
}

/* Creating can grow past the chrome band — restore a local rule so the
   sort header / body still has a separator. */
.workspace-layout .brands-scroll > .entity-list > .entity-list__titlebar.is-creating,
.workspace-layout .subs-scroll > .entity-list > .entity-list__titlebar.is-creating,
.workspace-layout .brand-home-section > .entity-list > .entity-list__titlebar.is-creating,
.workspace-layout .owner-members > .entity-list > .entity-list__titlebar.is-creating {
  border-bottom-color: var(--border-subtle);
}

.entity-list__titlebar .entity-list__title {
  flex: 1;
  min-width: 0;
}

.entity-list__titlebar-search {
  flex: 1;
  min-width: 0;
  max-width: var(--measure);
}

.entity-list__titlebar-create {
  flex: 1;
  min-width: 0;
  max-width: var(--measure);
  display: flex;
  align-items: center;
  min-height: var(--control-h);
}

.entity-list__titlebar-search .entity-list__search-shell {
  width: 100%;
  max-width: none;
  min-height: var(--control-h);
  height: var(--control-h);
  box-sizing: border-box;
}

.entity-list__titlebar-search .entity-list__search-input {
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

.entity-list__titlebar-create .entity-list-create {
  width: 100%;
}

/* Keep create actions on --control-h so chrome Y pad stays visible. */
.entity-list__titlebar-create .btn {
  box-sizing: border-box;
  min-height: var(--control-h);
  max-height: var(--control-h);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  font-size: inherit;
  line-height: 1.25;
}

.entity-list__titlebar-end {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex-shrink: 0;
}

.entity-list__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Same band as EntityRow / NavRailItem (`--row-h` = 8u). */
  box-sizing: border-box;
  height: var(--row-h);
  min-height: var(--row-h);
  max-height: var(--row-h);
  padding: 0 var(--list-pad-x);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: var(--bg);
  overflow: hidden;
}

.entity-list__title {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.entity-list__icon-spacer {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}

.entity-list__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0 var(--space-2);
  border: none;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.25;
  cursor: pointer;
}

.entity-list__sort--label {
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
  padding-left: 0;
}

.entity-list__header-end {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex-shrink: 0;
}

/* Match EntityRow meta slots — same width + align (never center; atomics). */
.entity-list__header-end > .entity-list__sort {
  box-sizing: border-box;
  flex: 0 0 var(--entity-meta-slot-w, max-content);
  width: var(--entity-meta-slot-w, max-content);
  min-width: var(--entity-meta-slot-w, max-content);
  justify-content: flex-start;
  text-align: var(--align-text, left);
  /* No horizontal pad — left edge of label matches badge/hint in the slot. */
  padding-left: 0;
  padding-right: 0;
}

.entity-list__header-end > .entity-list__sort[data-align="end"] {
  justify-content: flex-end;
  text-align: var(--align-number, right);
}

.entity-list__sort:hover {
  background: var(--bg-elevated);
}

.entity-list__sort-ind {
  min-width: 0.75em;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.entity-list__search {
  flex-shrink: 0;
  padding: var(--space-2) var(--list-pad-x);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg);
}

.entity-list__search-shell {
  container-type: inline-size;
  container-name: entity-list-search;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: 0 var(--space-2);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.entity-list__search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: var(--control-h);
  margin: 0;
  padding: var(--space-2) 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
}

.entity-list__search-input:focus {
  outline: none;
}

.entity-list__search-shell:focus-within {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
}

.entity-list__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.entity-list__search-trail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  max-width: 55%;
  min-width: 0;
}

.entity-list__search-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted, var(--muted-foreground, inherit));
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}

.entity-list__search-shell:hover .entity-list__search-add,
.entity-list__search-shell:focus-within .entity-list__search-add,
.entity-list__search-shell.is-add-open .entity-list__search-add {
  opacity: 1;
  pointer-events: auto;
}

.entity-list__search-add:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.entity-list__search-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 1;
  min-width: 0;
  overflow-x: auto;
}

.entity-list__search-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  margin: 0;
  padding: 0.1rem 0.35rem;
  border: none;
  /* Inner of field (`--radius-sm` / 6) — one step smaller. */
  border-radius: 4px;
  background: #5c5c5c;
  color: #000;
  font: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.2;
  cursor: pointer;
}

.entity-list__search-chip:hover {
  filter: brightness(1.08);
}

.entity-list__search-chip-full {
  display: inline;
}

.entity-list__search-chip-short {
  display: none;
}

@container entity-list-search (max-width: 299px) {
  .entity-list__search-chip-full {
    display: none;
  }

  .entity-list__search-chip-short {
    display: inline;
  }
}

.entity-list__settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-muted, var(--muted-foreground, inherit));
  cursor: pointer;
}

.entity-list__settings-btn:hover {
  background: var(--bg-elevated, var(--secondary));
  color: var(--text, inherit);
}

.entity-list__group {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: var(--space-2) var(--list-pad-x);
  border: none;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  color: var(--text);
  background: var(--bg-elevated);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.entity-list__group:hover {
  background: var(--bg-elevated);
  filter: brightness(1.06);
}

.entity-list__group-block > .entity-list__group:first-child,
.entity-list__body > .entity-list__group:first-child,
.entity-list__group:first-child {
  border-top: none;
}

.entity-list__group .ui-caps {
  color: var(--text);
}

.entity-list__group-chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 120ms ease;
}

.entity-list__group-chevron.is-collapsed {
  transform: rotate(-90deg);
}

.entity-list__group-body.is-collapsed {
  display: none;
}

.entity-list__create {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--list-pad-x);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg);
}

.entity-list__create-main {
  flex: 1;
  min-width: 0;
}

.entity-list__chrome-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--text-muted);
  cursor: pointer;
}

.entity-list__chrome-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
}

.entity-list__chrome-toggle.is-active {
  color: var(--text);
  border-color: var(--accent-strong);
  background: var(--bg-elevated);
}

.entity-list__create-toggle svg {
  transition: transform 120ms ease;
}

.entity-list__create-toggle.is-active svg {
  transform: rotate(45deg);
}

.entity-list__search-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--text-muted);
  cursor: pointer;
}

.entity-list__search-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
}

.entity-list__search-toggle.is-active {
  color: var(--text);
  border-color: var(--accent-strong);
  background: var(--bg-elevated);
}