/* ticket-detail.css — detail grid, ticket header, comment thread, meta rows */
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}

/* Back is a text control, not a button: it undoes a navigation rather than
   performing an action, and the platform draws that as a chevron and a word. */
.back{border:0;background:transparent;color:var(--accent);font-size:13.5px;font-weight:500;letter-spacing:-.01em;cursor:pointer;padding:0 0 16px;display:flex;align-items:center;gap:5px}
.back:hover{color:var(--accent-dark)}
.back:active{transform:translateX(-2px)}

.t-title{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.22;text-wrap:balance}
.t-meta{font-size:13px;color:var(--muted);margin-top:9px;letter-spacing:-.006em}
/* Prose is capped at a reading measure. Tables want every pixel of a wide
   screen; running text does not — past ~80 characters the eye loses the
   start of the next line. This binds only when there is room to spare. */
.t-desc{font-size:15px;line-height:1.65;color:var(--ink-2);margin-top:20px;padding-top:20px;border-top:1px solid var(--line-mid);white-space:pre-wrap;text-wrap:pretty;max-width:72ch}
.section-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

/* The thread. A comment is a message, so it is given the room a message needs;
   an agent's reply sits on the alternate surface so the two sides of the
   conversation can be told apart without reading the name. */
.comment{display:flex;gap:14px;padding:20px 26px;border-bottom:1px solid var(--line-soft);background:var(--raised)}
.comment.agent{background:var(--surface-alt)}
.comment .who{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.comment .who b{font-size:13.5px;font-weight:600;letter-spacing:-.012em}
.comment .who .role{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 8px}
.comment .who .time{font-size:12px;color:var(--muted-2)}
.comment .body{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:7px;white-space:pre-wrap;text-wrap:pretty;max-width:72ch}
.composer{padding:20px 26px;background:var(--surface-alt)}
.composer textarea{min-height:100px}

.meta-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;letter-spacing:-.006em}
.meta-row span:first-child{color:var(--muted)}
.meta-row span:last-child{font-weight:500;text-align:right}

/* One recorded change, in the same thread as the comments and deliberately
   quieter than one: what was said carries the ticket, what was done to it is
   the margin note. A dot rather than an avatar, because there is no face to
   put there — the actor's name is inside the sentence. */
.event{display:flex;align-items:baseline;gap:11px;padding:12px 26px;border-bottom:1px solid var(--line-soft);background:var(--raised)}
.event .dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--field);align-self:center}
.event .txt{font-size:13px;color:var(--muted);min-width:0;text-wrap:pretty}
.event .time{margin-left:auto;flex:none;font-size:12px;color:var(--muted-2)}

/* Taking a file off a ticket. The same glyph as the form's own × but on a
   record rather than a draft, so it is drawn only for whoever may write. */
.file-x{margin-left:2px;border:0;background:transparent;cursor:pointer;color:var(--faint);font-size:15px;line-height:1;padding:2px 4px;border-radius:var(--r-xs)}
.file-x:hover{color:var(--danger);background:var(--hover)}