/* List view (.ls-): grid rows that behave like a table, inline editors,
   groups, drag-reorder and compact mobile rows. */
.ls-wrap { padding: 14px 20px 48px; }
.ls-hint { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 6px 6px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); font-size: 12.5px; }
.ls-hint > span { flex: 1; }
.ls-hint .ico { color: var(--text-3); }
.ls-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ls-table { min-width: max-content; width: 100%; }

.ls-row { display: grid; grid-template-columns: var(--ls-cols); align-items: center; min-height: 42px; border-bottom: 1px solid var(--line); background: var(--surface); transition: background var(--dur) var(--ease); }
.ls-row:not(.ls-head):hover { background: var(--surface-2); }
.ls-row.is-selected { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); box-shadow: inset 3px 0 0 var(--brand); }
.ls-row.is-selected:hover { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.ls-row.is-sub { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.ls-row.is-drag-hidden { display: none; }
.ls-c { min-width: 0; padding: 0 10px; display: flex; align-items: center; gap: 6px; height: 100%; }
.ls-c-sel { justify-content: center; padding: 0 0 0 4px; }
.ls-row:not(.ls-head) .ls-c-sel .cbx { opacity: 0; transition: opacity var(--dur); }
.ls-row:hover .ls-c-sel .cbx, .ls-row.is-selected .ls-c-sel .cbx, .ls-c-sel .cbx:focus-visible, .ls-c-sel .cbx:checked { opacity: 1; }
.ls-table:has(.ls-row.is-selected) .ls-c-sel .cbx { opacity: 1; }

/* Header */
.ls-head { min-height: 38px; background: var(--surface-2); border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
.ls-th { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px; margin-left: -6px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.ls-th:hover { background: var(--hover); color: var(--text-2); }
.ls-th.is-sorted { color: var(--brand-text); }

/* Title cell with tree indentation */
.ls-c-title { padding-left: calc(6px + var(--depth, 0) * 22px); gap: 6px; position: relative; }
.ls-grip { position: absolute; left: -8px; width: 14px; height: 26px; display: grid; place-items: center; color: var(--text-3); cursor: grab; opacity: 0; touch-action: none; border-radius: 4px; }
.ls-row:hover .ls-grip { opacity: 1; }
.ls-grip:hover { background: var(--hover); color: var(--text); }
.ls-exp, .ls-exp-gap { width: 20px; height: 20px; flex: none; }
.ls-exp { display: grid; place-items: center; border-radius: 4px; color: var(--text-3); }
.ls-exp:hover { background: var(--hover); color: var(--text); }
.ls-exp .ico { transition: transform var(--dur) var(--ease); }
.ls-exp.is-open .ico { transform: rotate(90deg); }
.ls-row.is-sub .ls-c-title::before { content: ""; position: absolute; left: calc(6px + (var(--depth) - 1) * 22px + 9px); top: 0; bottom: 50%; width: 9px; border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); border-bottom-left-radius: 5px; }
.ls-key { flex: none; color: var(--text-3); }
.ls-key:hover { color: var(--brand-text); text-decoration: none; }
.ls-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--text); cursor: text; padding: 3px 5px; margin-left: -5px; border-radius: var(--r-xs); }
.ls-title:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.ls-row.is-done .ls-title { color: var(--text-3); text-decoration: line-through; }
.ls-row.is-sub .ls-title { font-weight: 400; }
.ls-subcount { height: 20px; font-size: 11.5px; flex: none; }
.ls-c-title .kb-star { display: inline-grid; color: var(--warning); flex: none; }
.ls-c-title .kb-star .ico { width: 14px; height: 14px; fill: currentColor; }
.ls-open { margin-left: auto; opacity: 0; flex: none; }
.ls-row:hover .ls-open, .ls-open:focus-visible { opacity: 1; }
.ls-compact { display: none; }
.ls-c-title .drop-check.is-readonly { pointer-events: none; }

/* Value cells */
.ls-val { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; height: 30px; padding: 0 6px; margin-left: -6px; border-radius: var(--r-sm); text-align: left; overflow: hidden; color: var(--text); }
button.ls-val:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.ls-val.is-static { cursor: default; }
.ls-empty { font-size: 12.5px; color: var(--text-3); opacity: 0; transition: opacity var(--dur); }
.ls-row:hover .ls-empty, .ls-val:focus-visible .ls-empty { opacity: 1; }
.ls-tags { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.ls-colpill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-3); font-size: 12px; font-weight: 500; color: var(--text-2); max-width: 100%; }
.ls-colpill.is-done { background: var(--success-soft); color: var(--success); }
.ls-inline { height: 30px; padding: 0 8px; font-size: 13.5px; }
.ls-title-input { flex: 1; min-width: 160px; font-weight: 500; }
.ls-date-pop { padding: 10px; }

/* Groups */
.ls-group { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ls-group-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 14px; font-size: 13px; color: var(--text); text-align: left; position: sticky; left: 0; max-width: 100vw; }
.ls-group-btn > .ico:first-child { color: var(--text-3); transition: transform var(--dur) var(--ease); }
.ls-group-btn > .ico.is-open { transform: rotate(90deg); }
.ls-group-btn .ico { color: var(--text-2); }
.ls-group.is-danger .ls-group-btn b, .ls-group.is-danger .ls-group-btn .ico:nth-child(2) { color: var(--danger); }
.ls-group-count { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Add row */
.ls-add { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 14px 0 46px; color: var(--text-3); font-size: 13px; border-bottom: 1px solid var(--line); text-align: left; position: sticky; left: 0; max-width: 100vw; }
button.ls-add:hover { color: var(--brand-text); background: var(--surface-2); }
.ls-add.is-open { color: var(--brand); padding-right: 10px; }
.ls-add-input { height: 30px; max-width: 640px; }
.ls-table > :last-child { border-bottom: 0; }

/* Drag */
.ls-placeholder { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 40%, transparent); }
.ls-ghost { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; overflow: hidden; border: 1px solid var(--brand-soft-2); border-radius: var(--r-md); box-shadow: var(--shadow-drag); background: var(--surface); }
.ls-ghost.is-landing { box-shadow: var(--shadow-2); }
body.ls-is-dragging, body.ls-is-dragging * { cursor: grabbing !important; user-select: none; }

.ls-groupseg button { white-space: nowrap; }
.ls-m-show { display: none; }

/* Mobile: compact rows (title + meta line), no field columns */
@media (max-width: 860px) {
  .ls-wrap { padding: 12px 12px 40px; }
  .ls-m-hide { display: none; }
  .ls-m-show { display: inline; }
  .ls-hint { font-size: 12px; flex-wrap: wrap; }
  .ls-scroll { overflow-x: visible; }
  .ls-table { min-width: 0; }
  .ls-row { grid-template-columns: 34px minmax(0, 1fr); min-height: 52px; }
  .ls-row > .ls-c:nth-child(n + 3) { display: none; }
  .ls-head .ls-c-title { padding-left: 6px; }
  .ls-row:not(.ls-head) .ls-c-sel .cbx { opacity: 1; }
  .ls-c-title { flex-wrap: wrap; row-gap: 4px; padding-top: 8px; padding-bottom: 8px; padding-left: calc(4px + var(--depth, 0) * 16px); }
  .ls-title { white-space: normal; flex: 1 1 140px; }
  .ls-open, .ls-grip { display: none; }
  .ls-compact { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 5px; align-items: center; padding-left: 52px; }
  .ls-compact:empty { display: none; }
  .ls-row.is-sub .ls-c-title::before { display: none; }
  .ls-add { padding-left: 16px; }
}