/* The ticket list (ticket-list.js): the founder's Tickets tab, a line each in a
   notebook's ruled style, newest on top. A mark in the margin by the ticket's
   state (green written, oxblood did not finish, lemon being written), then the
   sentence, then its reply. The hidden attribute and reduced motion are primer.css's
   global rules, which this relies on (the walk checks both). */
.tk-host { display: block; }
.tk-root { color: var(--ink); font: 15px/1.45 var(--sans); }
.tk-root *, .tk-root *::before, .tk-root *::after { box-sizing: border-box; }
.tk-root :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.tk { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.tk-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; padding: 14px 0 12px 18px; border-bottom: 1px solid var(--line-strong); }
.tk-item::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 2px; background: var(--tk-mark, var(--line-strong)); }
.tk-item[data-status="done"] { --tk-mark: var(--leaf); }
.tk-item[data-status="failed"] { --tk-mark: var(--oxblood); }
.tk-item[data-status="writing"] { --tk-mark: var(--lemon); }

.tk-line { grid-column: 1; margin: 0; font: 400 17px/1.45 var(--serif); font-variation-settings: "opsz" 18; text-wrap: pretty; overflow-wrap: anywhere; }
.tk-when { grid-column: 2; grid-row: 1; align-self: start; padding-top: 3px; font: 500 12.5px/1.4 var(--sans); color: var(--ink-soft); white-space: nowrap; }
.tk-reply { grid-column: 1 / -1; margin: 0; font: 600 14px/1.4 var(--sans); overflow-wrap: anywhere; }
.tk-reply[data-kind="ok"]::before { content: ""; display: inline-block; width: 6px; height: 11px; margin: 0 10px 2px 3px; border-right: 2.5px solid var(--leaf); border-bottom: 2.5px solid var(--leaf); transform: rotate(40deg); }
.tk-reply[data-kind="bad"] { color: var(--oxblood); }
.tk-reply[data-kind="bad"]::before { content: "\00D7"; margin-right: 8px; font-size: 18px; line-height: 1; vertical-align: -1px; }
.tk-reply[data-kind="wait"] { color: var(--ink-soft); font-weight: 500; }

.tk-more { grid-column: 1; justify-self: start; min-height: 40px; padding: 4px 0; border: 0; background: none; color: var(--ink); font: 500 13px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tk-more:hover { color: var(--oxblood); }
.tk-details { grid-column: 1 / -1; margin: 2px 0 0; display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--paper-2); }
.tk-details > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
.tk-details dt { font: 500 11px/1.8 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.tk-details dd { margin: 0; font: 14px/1.5 var(--sans); overflow-wrap: anywhere; }
.tk-none { margin: 0; max-width: 46ch; color: var(--ink-soft); }

/* Narrow: the time is a small label above the line, where a date sits in a notebook. */
@media (max-width: 520px) {
  .tk-item { grid-template-columns: minmax(0, 1fr); }
  .tk-when { order: -1; grid-column: 1; grid-row: auto; padding-top: 0; }
}
.tk-reply[data-kind="off"] { color: var(--ink-soft); font-weight: 500; }

/* The thread under a ticket whose Studio job stopped (webhook/lib/ticket-thread.ts): oldest first, each comment with who wrote it and when,
   indented under the line on a thin rule like replies in a margin; the end in its colour (leaf resolved, oxblood unresolved). */
.tk-item[data-end="resolved"] { --tk-mark: var(--leaf); }
.tk-item[data-end="unresolved"] { --tk-mark: var(--oxblood); }
.tk-item[data-end="dismissed"] { --tk-mark: var(--line-strong); }
.tk-thread { grid-column: 1 / -1; list-style: none; margin: 6px 0 2px; padding: 0 0 0 14px; border-left: 2px solid var(--line-strong); display: grid; gap: 8px; max-width: 68ch; }
.tk-c { margin: 0; }
.tk-c-head { margin: 0; font: 500 12.5px/1.4 var(--sans); color: var(--ink-soft); }
.tk-c-head b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.tk-c[data-by="person"] .tk-c-head b { color: var(--accent, var(--ink)); }
.tk-c-text { margin: 2px 0 0; font: 14.5px/1.5 var(--sans); overflow-wrap: anywhere; text-wrap: pretty; }
.tk-c[data-kind="resolved"] .tk-c-text { color: var(--ink); font-weight: 600; }
.tk-c[data-kind="unresolved"] .tk-c-text { color: var(--oxblood); font-weight: 600; }
.tk-end { grid-column: 1 / -1; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tk-end button { min-height: 44px; }
.tk-box { grid-column: 1 / -1; display: grid; gap: 8px; margin: 6px 0 0; max-width: 68ch; }
.tk-box label { display: grid; gap: 4px; }
.tk-box textarea, .tk-box input { width: 100%; min-height: 44px; font: 16px/1.4 var(--sans); padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); }
.tk-box .cta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-note { grid-column: 1 / -1; margin: 4px 0 0; color: var(--ink-soft); overflow-wrap: anywhere; }