@layer components {
/* Ticket card (board, whiteboard) and compact ticket lines (home, plan, goal tree) */
.card {
  --c: var(--sev-minor);
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-10); padding: 10px 11px;
  display: flex; flex-direction: column; gap: 8px; cursor: pointer; position: relative; overflow: hidden; text-align: left; width: 100%;
}
.card:hover { border-color: var(--fg-4); }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.card .ct { font-weight: 500; line-height: 1.35; }
.card .cm { display: flex; align-items: center; gap: 8px; font-size: var(--fs-11); color: var(--fg-3); min-width: 0; }
.card .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.card.dragging { opacity: 0.5; }

.tlist { display: flex; flex-direction: column; }
.tli { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto minmax(52px, auto); gap: 10px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.tli:first-child { border-top: 0; }
.tli:hover { background: var(--bg-3); border-radius: var(--r-8); }
.tli .mono { font-size: var(--fs-11); color: var(--fg-4); }
.tli .st { display: grid; place-items: center; }
.tli .who { display: flex; justify-content: flex-end; padding-left: 4px; }
.tli .tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 8px; align-items: center; min-width: 0; }
.tli .tt span { overflow: hidden; text-overflow: ellipsis; }
}