#split-view {
  display: flex;
  flex: 1;
  overflow: hidden;
}

#touch-list-panel {
  width: 320px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tl-section-label {
  padding: 10px 18px 6px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-secondary); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.touch-list-scroll { flex: 1; overflow-y: auto; }

.touch-item {
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: background .12s;
}
.touch-item:hover  { background: var(--surface-3); }
.touch-item.selected { background: var(--surface-3); border-left: 3px solid var(--sage); padding-left: 15px; }
.touch-item.overdue  { border-left: 3px solid var(--overdue); padding-left: 15px; }
.touch-item.done { opacity: .5; }

.ti-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage); flex-shrink: 0; margin-top: 5px;
}
.ti-dot.overdue { background: var(--overdue); }
.ti-dot.done    { background: var(--sage-light); }

.ti-body { flex: 1; }
.ti-name {
  font-family: var(--font-serif); font-size: 13px;
  color: var(--text-primary); font-weight: 700; margin-bottom: 2px;
}
.ti-detail { font-size: 10px; color: var(--text-secondary); }
.ti-badge {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-right: 4px;
  background: var(--sage-light); color: var(--sage);
}
.ti-badge.overdue { background: var(--overdue-bg); color: var(--overdue); }

.ti-meta { font-size: 9px; color: var(--text-secondary); text-align: right; flex-shrink: 0; }
.ti-meta.overdue { color: var(--overdue); }

.tl-add-btn {
  margin: 12px 18px;
  width: calc(100% - 36px);
  flex-shrink: 0;
}