/* Campaign management and collaboration: templates, synced sets, discussion, ideas and share links. Tokens only. */

/* Shared pieces ------------------------------------------------------------------------------- */
.ts-collab { margin-bottom: var(--ts-space-6); }
.ts-collab .ts-card-head { padding: 18px var(--ts-space-6) var(--ts-space-3); }
.ts-collab-muted { color: var(--ts-text-muted); }
.ts-collab > .ts-collab-muted, .ts-collab > p { padding: 0 var(--ts-space-6); }
.ts-collab-form { padding: 0 var(--ts-space-6) var(--ts-space-6); }
.ts-collab-form > fieldset { padding: var(--ts-space-4) var(--ts-space-6) var(--ts-space-6); }
form.card.ts-collab-form { padding: 0; }
.ts-collab-buttons { display: flex; flex-wrap: wrap; gap: var(--ts-space-2); padding: 0 var(--ts-space-6) var(--ts-space-6); }
.ts-wz-card .ts-collab-buttons { padding: 0; }
.ts-collab-danger { padding: var(--ts-space-4) var(--ts-space-6) var(--ts-space-6); border-top: 1px solid var(--ts-border-subtle); }

.ts-collab-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--ts-space-6); }
@media (min-width: 992px) {
  .ts-collab-cols { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
}

.ts-collab-tag--info { background: var(--ts-blue-100); color: var(--ts-blue-700); }
.ts-collab-tag--attention { background: var(--ts-pink-100); color: var(--ts-pink-650); }
.ts-collab-tag--warning { background: var(--ts-amber-100); color: var(--ts-amber-700); }
.ts-collab-tag--neutral { background: var(--ts-slate-100); color: var(--ts-slate-700); }
.ts-collab-tag--success { background: var(--ts-green-150); color: var(--ts-green-650); }

/* Search and filter bar */
.ts-collab-filter { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ts-space-3); padding: var(--ts-space-4) var(--ts-space-6); border-bottom: 1px solid var(--ts-border-subtle); background: var(--ts-creamy); border-top-left-radius: calc(var(--ts-radius-lg) - 1px); border-top-right-radius: calc(var(--ts-radius-lg) - 1px); }
.ts-collab-filter__field { flex: 1 1 200px; }
.ts-collab-filter__field .form-label { margin-bottom: var(--ts-space-1); font-size: var(--ts-fs-small); }

/* Lists of templates */
.ts-collab-list { list-style: none; margin: 0; padding: 0; }
.ts-collab-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ts-space-4); align-items: start; padding: var(--ts-space-4) var(--ts-space-6); border-top: 1px solid var(--ts-border-subtle); }
.ts-collab-item:hover { background: var(--ts-hover-row); }
.ts-collab-item__name { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.ts-collab-item__name a { color: var(--ts-text); text-decoration: none; }
.ts-collab-item__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ts-collab-item__desc { margin: 2px 0 0; max-width: 72ch; color: var(--ts-text-secondary); }
.ts-collab-item__meta { display: flex; flex-wrap: wrap; gap: 6px var(--ts-space-4); margin: var(--ts-space-2) 0 0; color: var(--ts-text-muted); font-size: var(--ts-fs-small); }
@media (max-width: 575.98px) {
  .ts-collab-item { grid-template-columns: minmax(0, 1fr); }
}

/* Facts (a template's contents) */
.ts-collab-facts { margin: 0; padding: 0 var(--ts-space-6) var(--ts-space-6); }
.ts-collab-facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--ts-space-3); padding: var(--ts-space-2) 0; border-top: 1px solid var(--ts-border-subtle); }
.ts-collab-facts dt { color: var(--ts-text-muted); font-weight: 500; }
.ts-collab-facts dd { margin: 0; }

.ts-collab-people { list-style: none; margin: 0; padding: 0 var(--ts-space-6) var(--ts-space-6); }
.ts-collab-people li { display: flex; justify-content: space-between; gap: var(--ts-space-2); padding: var(--ts-space-1) 0; }

/* Hypothesis notes ---------------------------------------------------------------------------- */
.ts-notes__list { margin: 0; padding: 0 var(--ts-space-6) var(--ts-space-4); }
.ts-notes__list > div { padding: var(--ts-space-2) 0; }
.ts-notes__list dt { font-size: var(--ts-fs-small); color: var(--ts-text-muted); font-weight: 600; text-transform: none; }
.ts-notes__list dd { margin: 2px 0 0; max-width: 80ch; }
.ts-notes__links { list-style: none; margin: 0; padding: 0; }
.ts-notes__links .bi { margin-left: 4px; font-size: 11px; }
.ts-notes__edit { padding: 0 var(--ts-space-6) var(--ts-space-4); margin: 0; font-size: var(--ts-fs-small); }

/* Discussion ---------------------------------------------------------------------------------- */
.ts-comments { list-style: none; margin: 0; padding: 0; }
.ts-comment { padding: var(--ts-space-4) var(--ts-space-6); border-top: 1px solid var(--ts-border-subtle); }
.ts-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-space-2) var(--ts-space-3); }
.ts-comment__when { color: var(--ts-text-muted); font-size: var(--ts-fs-small); }
.ts-comment__body { margin: var(--ts-space-2) 0 0; max-width: 80ch; overflow-wrap: anywhere; }
.ts-comment--deleted .ts-comment__body { font-style: italic; }
.ts-comment__actions { display: flex; gap: var(--ts-space-2); margin-top: var(--ts-space-2); }
.ts-comment__form textarea { margin-top: var(--ts-space-2); }
.ts-comment__new { padding: var(--ts-space-4) var(--ts-space-6) var(--ts-space-6); border-top: 1px solid var(--ts-border-subtle); background: var(--ts-sand-50); border-bottom-left-radius: calc(var(--ts-radius-lg) - 1px); border-bottom-right-radius: calc(var(--ts-radius-lg) - 1px); }
.ts-comment__new .btn { margin-top: var(--ts-space-3); }
.ts-mention { color: var(--ts-pink-650); font-weight: 600; }

/* Synced sets --------------------------------------------------------------------------------- */
.ts-sync-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ts-space-3); padding: var(--ts-space-4) var(--ts-space-6); margin-bottom: var(--ts-space-6); background: var(--ts-creamy); }
.ts-sync-bar__text { margin: 0; }
.ts-sync-site__head { padding: 18px var(--ts-space-6) var(--ts-space-3); }
.ts-sync-site__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-space-2) var(--ts-space-3); }
.ts-sync-site__title h2 { margin: 0; font-size: var(--ts-fs-card); font-weight: 600; }
.ts-sync-site__title .form-check-input { margin: 0; width: 20px; height: 20px; }
.ts-sync-site__meta { display: flex; flex-wrap: wrap; gap: 6px var(--ts-space-4); margin: var(--ts-space-2) 0 0; color: var(--ts-text-muted); font-size: var(--ts-fs-small); }
.ts-sync-site__reason { padding: 0 var(--ts-space-6); color: var(--ts-amber-700); }
.ts-sync-site__none { padding-bottom: var(--ts-space-4); }
.ts-sync-diff { margin: 0 0 var(--ts-space-4); }
.ts-sync-diff caption { caption-side: top; padding: var(--ts-space-3) var(--ts-space-6) var(--ts-space-1); color: var(--ts-text); font-weight: 600; }
.ts-sync-diff th:first-child, .ts-sync-diff td:first-child { padding-left: var(--ts-space-6); }
.ts-sync-diff th:last-child, .ts-sync-diff td:last-child { padding-right: var(--ts-space-6); }
.ts-sync-diff tbody th { font-weight: 500; width: 28%; }
.ts-sync-diff__value { margin: 0; max-height: 12rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--ts-font-mono); font-size: 12px; color: var(--ts-text-secondary); }
.ts-sync-diff tr.is-changed td:nth-child(3) .ts-sync-diff__value { color: var(--ts-text); }
.ts-sync-diff tr.is-overridden { background: var(--ts-sand-75); }
.ts-sync-diff__act { width: 1%; white-space: nowrap; text-align: right; }
.ts-sync-diff__source summary { font-size: var(--ts-fs-small); color: var(--ts-text-muted); cursor: pointer; }
.ts-sync-approvals { margin-bottom: var(--ts-space-8); }
.ts-sync-approvals__title { font-size: var(--ts-fs-card); font-weight: 600; margin: 0 0 var(--ts-space-3); }
.ts-sync-approvals__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ts-space-3); padding: 0 var(--ts-space-6) var(--ts-space-6); }
.ts-sync-approvals__reject { display: flex; gap: var(--ts-space-2); align-items: center; }

/* Ideas --------------------------------------------------------------------------------------- */
.ts-ideas th[scope="row"] { font-weight: 500; }
.ts-ideas__note { display: block; color: var(--ts-text-muted); font-size: var(--ts-fs-small); font-weight: 400; }
.ts-ideas .num { text-align: right; }
.ts-ice { display: inline-block; min-width: 2.5em; padding: 2px 8px; border-radius: var(--ts-radius-pill); background: var(--ts-blue-100); color: var(--ts-blue-700); font-weight: 600; text-align: center; }
.ts-sort { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.ts-sort.is-active { color: var(--ts-text); }
.ts-ice-fields { margin-top: var(--ts-space-4); }
.ts-ice-fields legend { font-size: inherit; }
.ts-cal-ideas { margin-top: var(--ts-space-6); }
.ts-cal-ideas__month { padding: 0 var(--ts-space-6); margin: var(--ts-space-2) 0 var(--ts-space-1); font-size: var(--ts-fs-small); color: var(--ts-text-muted); font-weight: 600; }
.ts-cal-ideas__list { list-style: none; margin: 0 0 var(--ts-space-4); padding: 0 var(--ts-space-6); }
.ts-cal-ideas__list li { display: flex; flex-wrap: wrap; gap: var(--ts-space-2); align-items: center; padding: var(--ts-space-1) 0; }

/* Share links and the shared page ------------------------------------------------------------- */
.ts-share-new { border: 2px solid var(--ts-pink-600); }
.ts-share-new .input-group { padding: 0 var(--ts-space-6) var(--ts-space-6); }
.ts-share-table th[scope="row"] { font-weight: 500; }
.ts-share-table th:first-child, .ts-share-table td:first-child { padding-left: var(--ts-space-6); }
.ts-share-page { background: var(--ts-light-grey); }
.ts-share-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-3); padding: var(--ts-space-3) var(--ts-space-6); background: var(--ts-super-blue); color: var(--ts-white); }
.ts-share-head .ts-lockup { color: var(--ts-white); }
.ts-share-head__note { font-size: var(--ts-fs-small); }
.ts-share-main { max-width: 1200px; margin: 0 auto; padding: var(--ts-space-6) var(--ts-space-4); }
.ts-share-engine { display: inline-flex; gap: var(--ts-space-1); }
.ts-share-foot { margin: var(--ts-space-8) 0 0; color: var(--ts-text-muted); font-size: var(--ts-fs-small); }
.ts-share-gone { max-width: 640px; margin: var(--ts-space-12) auto; }

@media print {
  .ts-share-head, .ts-share-engine, .ts-page-actions { display: none !important; }
  .ts-share-page { background: var(--ts-white); }
  .ts-share-main { padding: 0; max-width: none; }
  .ts-share-page .card { box-shadow: none; break-inside: avoid; }
  .ts-share-page .collapse { display: block !important; }
}