/* tickets screens. Owned by workstream E; shared rules live in css/components.css
   and css/screens.css (the board, the cards). Only what the ticket board head,
   the filters, the blocker panel and the ticket page add is here. */

/* ------------------------------------------------------------ board head */
.tk-head-stats { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.tk-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 var(--s-5); }
.tk-filter {
  padding: 0 var(--s-4); height: 30px; border-radius: var(--r-full);
  border: var(--bw) solid var(--c-border); background: var(--c-surface);
  color: var(--c-text-2); font-size: var(--t-xs); font-weight: var(--t-medium);
  display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer;
}
.tk-filter:hover { background: var(--c-hover); color: var(--c-text); }
.tk-filter[aria-pressed="true"] { background: var(--c-accent-quiet); border-color: var(--c-accent); color: var(--c-text); font-weight: var(--t-semibold); }
.tk-filter-count { font-family: var(--t-mono); font-size: var(--t-2xs); color: var(--c-text-3); }
.tk-filter[aria-pressed="true"] .tk-filter-count { color: var(--c-text-2); }

/* Standing and consent health sit beside the board as small cards. */
.tk-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-5); margin-bottom: var(--s-6); }
.tk-side .card-body { display: flex; flex-direction: column; gap: var(--s-3); }
.tk-side .stat-figure { margin-top: var(--s-1); }
.tk-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); font-size: var(--t-xs); color: var(--c-text-2); }
.tk-kv dt { color: var(--c-text-3); }
.tk-kv dd { margin: 0; font-variant-numeric: tabular-nums; }

/* The parked column: tickets the ladder ran out under. */
.board-col.tk-parked { border-style: dashed; }
.board-col.tk-parked .board-col-title { color: var(--c-warn); }

.tcard-link { text-decoration: none; color: inherit; display: block; }
.tcard-link:hover .tcard, .tcard-link:focus-visible .tcard { border-color: var(--c-accent); }
.tcard-blocked { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-warn); font-size: var(--t-2xs); font-weight: var(--t-semibold); }
.tcard-blocked svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------- blockers */
.tk-blockers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.tk-blocker { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) var(--s-5); border: var(--bw) solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); }
.tk-blocker-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.tk-blocker-text { font-size: var(--t-sm); overflow-wrap: anywhere; }
.tk-blocker-meta { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: var(--t-2xs); color: var(--c-text-3); align-items: center; }

/* ------------------------------------------------------------ ticket page */
.tk-page-head { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: flex-start; }
.tk-page-head .page-head-text { flex: 1 1 420px; min-width: 0; }
.tk-num { font-family: var(--t-mono); color: var(--c-text-3); font-weight: var(--t-regular); margin-right: var(--s-3); }
.tk-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.tk-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0; }
.tk-actions button { flex: none; }

.tk-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (max-width: 900px) { .tk-grid { grid-template-columns: 1fr; } }

.tk-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--t-relaxed, 1.6); font-size: var(--t-sm); }
.tk-body:empty::before { content: 'No details were written.'; color: var(--c-text-3); }

.tk-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); font-size: var(--t-xs); margin: 0; }
.tk-facts dt { color: var(--c-text-3); }
.tk-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tk-facts .person { display: inline-flex; align-items: center; gap: var(--s-3); }
.tk-facts .avatar { width: 20px; height: 20px; font-size: 9px; }

/* The timeline. One row per event, dot on a rail, comments carry a body. */
.tk-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.tk-timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--c-border); }
.tk-ev { position: relative; padding: 0 0 var(--s-5) var(--s-8); min-width: 0; }
.tk-ev:last-child { padding-bottom: 0; }
.tk-ev-dot { position: absolute; left: 6px; top: 5px; width: 12px; height: 12px; border-radius: var(--r-full); background: var(--c-surface-3); border: 2px solid var(--c-surface); box-shadow: 0 0 0 1px var(--c-border); }
.tk-ev[data-kind="comment"] .tk-ev-dot { background: var(--c-accent); }
.tk-ev[data-kind="escalated"] .tk-ev-dot, .tk-ev[data-kind="escalation_unheld"] .tk-ev-dot { background: var(--c-warn); }
.tk-ev[data-kind="consent_refused"] .tk-ev-dot, .tk-ev[data-kind="cancelled"] .tk-ev-dot { background: var(--c-danger); }
.tk-ev[data-kind="closed"] .tk-ev-dot, .tk-ev[data-kind="consented"] .tk-ev-dot, .tk-ev[data-kind="resolved"] .tk-ev-dot { background: var(--c-good, var(--c-accent)); }
.tk-ev-head { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: baseline; font-size: var(--t-xs); }
.tk-ev-what { font-weight: var(--t-semibold); }
.tk-ev-when { color: var(--c-text-3); font-size: var(--t-2xs); margin-left: auto; white-space: nowrap; }
.tk-ev-note { margin: var(--s-2) 0 0; font-size: var(--t-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-ev[data-kind="comment"] .tk-ev-note { padding: var(--s-3) var(--s-4); background: var(--c-surface-2); border-radius: var(--r-sm); }
.tk-ev-detail { margin: var(--s-1) 0 0; font-size: var(--t-2xs); color: var(--c-text-3); }

.tk-comment { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.tk-comment textarea { width: 100%; min-height: 72px; }
.tk-comment-foot { display: flex; justify-content: flex-end; }

.tk-consent-box { display: flex; flex-direction: column; gap: var(--s-3); }
.tk-consent-row { display: flex; gap: var(--s-3); align-items: center; font-size: var(--t-xs); }
.tk-consent-row[data-decision="refuse"] { color: var(--c-danger); }

.tk-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-xs); }
.tk-block { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.tk-block[data-released="1"] { color: var(--c-text-3); }

@media (max-width: 640px) {
  .tk-actions button { flex: 1 1 auto; }
  .tk-facts { grid-template-columns: 1fr; }
  .tk-facts dt { margin-top: var(--s-2); }
}

/* The ticket link inside a blocker row. It read "#179" at the meta row's small
   type, which measured 22 by 16 and failed the 24px touch target floor the
   geometry audit enforces. Padding rather than a bigger font, so the row still
   reads as metadata and the tap target is a target. No negative margin to pull
   the padding back: it put the link 4px outside a parent that does not scroll,
   which the same audit catches as an escaped child. */
.tk-blocker-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.tk-blocker-meta a:hover { background: var(--c-surface-2, rgba(0,0,0,.04)); }