obelisk/app/renderer/styles/list.css

  .list-wrap, .detail-wrap, .session-list-wrap, .session-detail-wrap {
    flex: 1; overflow-y: auto; min-height: 0;
  }

  .row {
    display: grid; grid-template-columns: 22px 1fr auto;
    align-items: start; column-gap: 12px;
    padding: 14px 16px 14px 14px;
    min-height: var(--row-h);
    cursor: pointer; user-select: none;
    border-bottom: 1px solid var(--hairline);
    transition: background 0.06s; position: relative;
  }
  .row:last-child { border-bottom: 0; }
  .row:hover { background: rgba(255,255,255,0.025); }
  .row.cursor { background: var(--surface); }
  .row.cursor::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: var(--muted-2);
  }
  .row.selected { background: var(--accent-soft); }
  .row.selected::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
  }
  .row.cursor.selected { background: rgba(167,139,250,0.16); }
  .row-checkbox {
    width: 18px; height: 18px; margin-top: 1px;
    border-radius: 4px; border: 1.5px solid var(--muted-2);
    background: transparent; cursor: pointer;
    display: grid; place-items: center;
    opacity: 0; transition: all 0.1s;
    justify-self: center;
  }
  .row:hover .row-checkbox,
  .row.selected .row-checkbox,
  .row.cursor .row-checkbox { opacity: 1; }
  .row-checkbox:hover { border-color: var(--accent); }
  .row-checkbox.checked {
    background: var(--accent); border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
  }
  .row-checkbox svg { width: 10px; height: 10px; color: #0a0b14; opacity: 0; }
  .row-checkbox.checked svg { opacity: 1; }
  .row-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .row-path {
    font-family: var(--font-mono); font-size: var(--text-md);
    font-weight: 500; color: var(--fg); line-height: 1.4;
    display: flex; align-items: center; gap: 6px; min-width: 0;
  }
  .row-status {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; flex-shrink: 0;
  }
  .row-status svg { width: 100%; height: 100%; }
  .row-status.broken { color: var(--danger); }
  .row-status.partial { color: var(--warn); }
  .row-status.archived { color: var(--muted-2); }
  .row-path .project-prefix { color: var(--muted); font-weight: 400; flex-shrink: 0; }
  .row-path .project-prefix-sep { color: var(--muted-2); margin: 0 2px; flex-shrink: 0; }
  .row-path .path-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .row-path mark, .row-summary mark, .srow-title mark, .srow-snippet mark {
    background: var(--accent-soft); color: var(--accent-2);
    padding: 0 2px; border-radius: 2px;
  }
  .row-summary {
    font-size: var(--text-base); color: var(--fg-2);
    line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
  }
  .row-right {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 10px; flex-shrink: 0; padding-top: 1px;
  }
  .row-meta {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--muted); letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    display: flex; gap: 8px;
  }
  .row:hover .row-meta { color: var(--muted-2); }
  .row-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.1s; }
  .row:hover .row-actions, .row.cursor .row-actions { opacity: 1; }
  .row-action {
    height: 24px; padding: 0 8px; border-radius: 4px;
    color: var(--muted); font-size: var(--text-sm);
    display: inline-flex; align-items: center; gap: 5px;
    transition: all 0.1s; border: 1px solid transparent;
  }
  .row-action:hover { background: var(--surface-hi); color: var(--fg); border-color: var(--hairline-strong); }
  .row-action.danger:hover { background: var(--danger-soft); color: var(--danger); border-color: rgba(248,113,113,0.3); }
  .row-action.restore { color: var(--accent-2); }
  .row-action.restore:hover { background: var(--accent-soft); color: var(--fg); border-color: var(--accent-soft); }
  .row-action .kbd {
    font-family: var(--font-mono); font-size: 9.5px; color: var(--muted-2);
    padding: 0 3px; border: 1px solid var(--hairline); border-radius: 2px; line-height: 1.4;
  }
  .row-action:hover .kbd { color: var(--fg-2); border-color: var(--hairline-strong); }
  .row.archived .row-path, .row.archived .row-summary { color: var(--muted); }
  .row.archived .row-path .project-prefix { color: var(--muted-2); }

  .srow {
    display: grid; grid-template-columns: 1fr auto;
    align-items: start; column-gap: 12px;
    padding: 12px 16px;
    min-height: var(--row-h-session);
    cursor: pointer; user-select: none;
    border-bottom: 1px solid var(--hairline);
    transition: background 0.06s; position: relative;
  }
  .srow:hover { background: rgba(255,255,255,0.025); }
  .srow.cursor { background: var(--surface); }
  .srow.cursor::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: var(--muted-2);
  }
  .srow-obelisk {
    position: absolute; left: 0; bottom: 0;
    width: 3px; border-radius: 1.5px 1.5px 0 0;
  }
  .srow-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .srow-title {
    font-size: var(--text-md); font-weight: 500; color: var(--fg);
    line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .srow-meta {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted);
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  }
  .srow-meta .project-tag { color: var(--fg-2); font-weight: 500; }
  .srow-meta .dot { width: 2px; height: 2px; background: var(--muted-2); border-radius: 50%; flex-shrink: 0; }
  .srow-snippet {
    margin-top: 4px;
    font-size: var(--text-sm); color: var(--fg-2); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    padding-left: 14px; border-left: 2px solid var(--accent-soft);
  }
  .srow-snippet .snippet-label {
    font-family: var(--font-mono); font-size: 9.5px;
    color: var(--accent-2); letter-spacing: 0.04em;
    text-transform: uppercase; margin-right: 6px;
  }
  .srow-right {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--fg-2); text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0; padding-top: 2px; white-space: nowrap;
    display: flex; flex-direction: column; gap: 2px;
  }
  .srow-right .srow-created { font-size: 10px; color: var(--muted); }

  .empty {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: var(--muted-2); font-size: var(--text-sm);
    padding: 60px 20px; text-align: center;
    flex-direction: column; gap: 8px;
  }
  .empty .hint { font-size: 11px; color: var(--muted-2); }