/* ListPanel — shared LC (views/_listpanel.js). Panel look comes from editor-screen.css (.es-screen > aside). */
.lp { display: flex; flex-direction: column; min-height: 0; }
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-8) var(--sp-8) 0; }
.lp-title { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold); margin: 0; line-height: 1.4; }
/* labeled "＋ New X" — a compact primary button; the look comes from .btn.btn-primary (one source) */
.lp-new { flex: none; min-height: 1.75rem; padding: var(--sp-3) var(--sp-6); font-size: var(--fs-sm); border-radius: var(--r-md); }
.lp-tools { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-6) var(--sp-8); }
.lp-search { flex: 1 1 auto; min-width: 0; background: var(--bg); border: 0.0625rem solid var(--border); color: var(--text); border-radius: var(--r-lg); padding: 0.4375rem var(--sp-6); font-size: var(--fs-base); }
.lp-search:focus { border-color: var(--accent); }
.lp-filter { position: relative; flex: none; width: 2.125rem; height: 2.125rem; border-radius: var(--r-lg); font-size: var(--fs-md); }  /* icon-btn (2.2) */
.lp-filter:hover, .lp-filter.on { border-color: var(--accent); color: var(--accent); }
.lp-fbadge { position: absolute; top: -0.3125rem; right: -0.3125rem; min-width: 0.9375rem; height: 0.9375rem; padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--fs-micro); font-weight: 700; line-height: 0.9375rem; box-sizing: border-box; text-align: center; }
.lp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-1) var(--sp-8) var(--sp-8); display: flex; flex-direction: column; gap: 0.3125rem; }
.lp-empty { color: var(--muted); font-style: italic; font-size: var(--fs-sm); padding: 1.375rem var(--sp-3); text-align: center; line-height: 1.4; }
.lp-footer { flex: none; min-height: 0; display: flex; flex-direction: column; border-top: 0.0625rem solid var(--border); }

/* Advanced-filter modal body */
.modal-wide { max-width: 32.5rem; }
.lp-filters { display: flex; flex-direction: column; gap: var(--sp-7); margin-bottom: var(--sp-3); }
.lp-frow { display: grid; grid-template-columns: 6.75rem 1fr; align-items: center; gap: var(--sp-7); }
.lp-flabel { font-size: var(--fs-smplus); color: var(--muted); text-align: right; }
.lp-fctl { min-width: 0; }
.lp-frange { display: flex; align-items: center; gap: var(--sp-4); }
.lp-dash { color: var(--muted); }
.lp-fseg { display: inline-flex; }

/* ONE roster row (RosterRow) — name + meta, the row is the button */
.lp-row { display: flex; flex-direction: column; gap: var(--sp-1); width: 100%; text-align: left;
  padding: 0.4375rem 0.5625rem; border: 0.0625rem solid var(--border-soft, var(--border));
  border-radius: var(--r-lg); background: none; color: var(--text); cursor: pointer;
  transition: border-color .12s, background .12s; }
.lp-row:hover { border-color: rgba(var(--accent-rgb), .55); }
.lp-row.on { border-color: rgba(var(--gold-rgb), .55); background: rgba(var(--gold-rgb), .07); }
.lp-row-name { font-weight: 600; font-size: var(--fs-base); }
.lp-row-tag { font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lp-row-meta { font-size: var(--fs-xs); color: var(--muted); }