/* trackpanel.js + trackpicker.js: the composer's Track button (target, a dot
 * that says red a link gone / amber to review / green tracked, the words),
 * shown only for a linked chat, Details' way in for an unlinked one, and
 * the Track panel over the composer: linked cards (their parts: trackcard.css),
 * then the picker's venture bar, goal / milestone / task lists. */

.track-chip { max-width: 14rem; color: var(--sv-ink-tertiary); white-space: nowrap; }
.track-chip:is([data-tone="good"], [data-tone="review"]) { color: var(--sv-ink-secondary); }
.track-chip[aria-expanded="true"] { background: var(--ws-hover); color: var(--sv-ink); }
.track-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.track-chip-dot, .track-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sv-danger); }
.track-dot { background: var(--sv-hairline-strong); }
.track-dot[data-tone="bad"] { background: var(--sv-danger); }
:is(.track-chip[data-tone="good"] .track-chip-dot, .track-dot[data-tone="good"]) { background: var(--ws-working); }
:is(.track-chip[data-tone="review"] .track-chip-dot, .track-dot[data-tone="review"]) { background: var(--sv-attention); }

/* Details > Workflow, an unlinked chat: the way in to the panel. */
.track-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1) var(--sv-space-2); padding: var(--sv-space-2) var(--sv-space-3); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-link-row[hidden] { display: none; }
.track-link-open { color: var(--sv-ink); }
@media (max-width: 760px) { .track-link-open { min-height: 44px; } }

/* A reader's composer holds only the note and the navigator (sharing.css): Track stays. */
.main[data-access="read"] .composer-options > #track-chip:not([hidden]) { display: inline-flex !important; }
.main[data-access="read"] .composer > #track-panel:not([hidden]) { display: flex !important; }

/* ---- the panel, over the composer ---- */
.composer { position: relative; }
.track-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--sv-space-2));
  left: 0;
  z-index: var(--sv-z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
  max-height: min(36rem, 70dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sv-space-3);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: calc(var(--sv-radius) * 1.5);
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow-lg);
  font-size: var(--ui-text);
  text-align: left;
  animation: sv-enter-pop var(--sv-dur-fast) var(--sv-ease-out);
}
.track-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-2); }
.track-head h3 { margin: 0; font-size: var(--ui-text); font-weight: 600; }
.track-close, .track-back { min-width: 32px; min-height: 32px; padding: 0; }
.track-note, .track-empty, .track-status, .track-why { margin: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); line-height: 1.45; }
.track-panel > .track-empty { color: var(--sv-ink-secondary); font-size: var(--ui-text); }
.track-status { color: var(--sv-ink-secondary); }
.track-status:empty { display: none; }

/* ---- one plan node: dot, kind, title, status and meta ---- */
.track-line { display: flex; flex: 1; align-items: baseline; gap: var(--sv-space-2); min-width: 0; }
.track-line > .track-dot { align-self: flex-start; margin-top: 0.45em; }
.track-line-body { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; column-gap: var(--sv-space-2); row-gap: 2px; min-width: 0; line-height: 1.35; }
.track-kind { flex: none; width: 4.75rem; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 400; }
.track-title {
  display: -webkit-box;
  flex: 1 1 10rem;
  min-width: 0;
  overflow: hidden;
  color: var(--sv-ink);
  font-weight: 500;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.track-line-head { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sv-space-2); min-width: 0; }
.track-meta { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 2px var(--sv-space-3); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 400; }

/* ---- people, agents, new or existing ---- */
.track-face { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; color: var(--sv-ink-secondary); }
.track-face-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-avatar { position: relative; display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; overflow: hidden; border-radius: 50%; background: var(--sv-surface-dim); color: var(--sv-ink-secondary); font-size: 0.625rem; font-weight: 600; line-height: 1; }
.track-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.track-avatar.is-agent { background: var(--sv-surface-sunken); }
.track-avatar.is-agent .icon { width: 13px; height: 13px; }
.track-origin { flex: none; padding: 0 6px; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 999px; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 500; line-height: 1.5; white-space: nowrap; cursor: help; }
.track-origin[data-origin="new"] { border-color: color-mix(in srgb, var(--ws-working) 45%, transparent); color: var(--ws-working-ink); }

/* ---- linked cards ---- */
.track-cards { display: flex; flex-direction: column; gap: var(--sv-space-2); }
.track-card { display: flex; flex-direction: column; gap: var(--sv-space-2); padding: var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface-raised); }
.track-card[data-review="true"] { border-color: var(--sv-hairline-strong); }
.track-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); padding-top: var(--sv-space-2); border-top: var(--sv-hairline-w) solid var(--sv-hairline); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-actions { display: inline-flex; gap: var(--sv-space-1); margin-left: auto; }
:is(.track-actions, .track-focus, .track-row) > button, .track-another { min-height: 28px; padding: 0 var(--sv-space-3); font-size: var(--ui-meta); }
.track-why { color: var(--sv-ink-secondary); }

/* ---- the picker ---- */
.track-picker, .track-pick, .track-stage { display: flex; flex-direction: column; gap: var(--sv-space-2); }
.track-picker { padding-top: var(--sv-space-2); border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.track-another { align-self: flex-start; }
.track-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1); }
.track-venture { flex: 1 1 12rem; min-width: 0; min-height: 32px; padding: 0 var(--sv-space-2); font-size: var(--ui-text); }
.track-search { width: 100%; min-height: 32px; padding: 0 var(--sv-space-3); font-size: var(--ui-text); }
.track-list { display: flex; flex-direction: column; }
.track-group { margin: var(--sv-space-2) 0 2px; padding: 0 var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 600; }
.track-row { display: flex; align-items: center; gap: var(--sv-space-2); width: 100%; min-height: 40px; padding: 6px var(--sv-space-2); border: 0; border-radius: var(--sv-radius); background: transparent; color: var(--sv-ink); text-align: left; }
button.track-row:hover { background: var(--ws-hover); }
.track-row > .icon { color: var(--sv-ink-tertiary); }
.track-row > .icon[role="img"], .track-go.is-tracked { color: var(--ws-working-ink); }
.track-go.is-tracked { opacity: 1; background: none; }
.track-focus { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); padding: var(--sv-space-2) var(--sv-space-3); border-radius: var(--sv-radius); background: var(--sv-surface-sunken); }
.track-focus .track-title { font-weight: 600; }
.track-crumbs { display: flex; align-items: center; gap: var(--sv-space-1); min-width: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-trail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-propose-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); margin: var(--sv-space-2) 0 0; padding: 0 var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.track-propose-open { min-height: 28px; padding: 0 var(--sv-space-2); font-size: var(--ui-meta); }
.track-propose-form { display: flex; flex-direction: column; gap: var(--sv-space-2); margin-top: var(--sv-space-2); padding: var(--sv-space-2) var(--sv-space-3); border: var(--sv-hairline-w) dashed var(--sv-hairline-strong); border-radius: var(--sv-radius); }
.track-propose-form > .track-actions > button { min-height: 28px; padding: 0 var(--sv-space-3); font-size: var(--ui-meta); }
.track-reading { padding: var(--sv-space-3) var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); animation: sv-breathe var(--pulse) ease-in-out infinite; }

@media (max-width: 760px) {
  .track-label { display: none; }
  .track-kind { width: auto; }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .track-row, .track-close, .track-back, .track-venture, .track-search, .track-bar > button,
  :is(.track-actions, .track-focus, .track-row) > button, .track-another, .track-propose-open { min-height: 44px; }
  /* Past the design system's button.ghost and the draft's own size. */
  .track-panel :is(.track-another, .track-propose-open, .track-propose-form button) { min-height: 44px; }
}