/* =====================================================================
   Support desk — the only page-specific stylesheet on the public site.

   It is loaded after style.css and adds nothing that page already has:
   the form, buttons, section headings and .form-note all come from there.
   What is here is the ticket furniture — the reference block, the status
   pill and the conversation thread.

   Every colour is one of style.css's custom properties, which the light
   theme redefines at :root. That is why there is not a single
   [data-theme="light"] rule below: the two themes fall out of the tokens.
   ===================================================================== */

/* The nav is position:fixed, so the first section on a content page needs
   clearance that the home page gets from its full-height hero. */
.support-page { padding-top: 9rem; }

.support-grid {
display: grid; grid-template-columns: 1.6fr 1fr;
gap: 4rem; align-items: start;
}

/* ── Side panels ── */
.support-panel {
background: var(--steel);
border: 1px solid var(--ash);
padding: 1.75rem;
}
.support-panel + .support-panel { margin-top: 1.5rem; }

.support-panel h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.5rem; letter-spacing: 1px;
margin-bottom: 0.75rem;
}

.support-panel p {
font-size: 0.875rem; font-weight: 300; line-height: 1.7;
color: var(--grey);
margin-bottom: 1.25rem;
}

/* ── Numbered "how this works" list ── */
.support-steps { list-style: none; counter-reset: step; }
.support-steps li {
counter-increment: step;
display: grid; grid-template-columns: 1.75rem 1fr;
gap: 0.75rem;
padding: 0.6rem 0;
font-size: 0.875rem; font-weight: 300; line-height: 1.6;
color: var(--grey);
}
.support-steps li::before {
content: counter(step);
font-family: 'JetBrains Mono', monospace;
font-size: 0.625rem;
width: 1.5rem; height: 1.5rem;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--dim);
color: var(--crimson);
}

/* ── The reference on the confirmation screen ── */
.ticket-ref-block {
background: var(--steel);
border: 1px solid var(--ash);
border-left: 3px solid var(--crimson);
padding: 2.25rem;
text-align: center;
margin-bottom: 2rem;
}
.ticket-ref-label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.5625rem; letter-spacing: 2px; text-transform: uppercase;
color: var(--grey);
margin-bottom: 0.75rem;
}
.ticket-ref {
font-family: 'JetBrains Mono', monospace;
font-size: clamp(1.25rem, 3vw, 1.875rem);
font-weight: 700; letter-spacing: 2px;
color: var(--white);
/* The whole point of this screen is that the number gets copied. */
user-select: all;
}

/* ── Ticket header on the tracker ── */
.ticket-head {
display: flex; align-items: center; flex-wrap: wrap;
gap: 0.875rem;
margin-bottom: 1.5rem;
}
.ticket-head .ticket-ref { font-size: 1.375rem; }

.ticket-pill {
font-family: 'JetBrains Mono', monospace;
font-size: 0.5625rem; letter-spacing: 2px; text-transform: uppercase;
padding: 0.375rem 0.75rem;
border: 1px solid currentColor;
white-space: nowrap;
}
/* Deliberately not the theme red: crimson is the brand accent everywhere
   else on the site, so using it for "open" would read as an error. */
.ticket-pill.is-open        { color: #E8A33D; }
.ticket-pill.is-in_progress { color: #3D8FE8; }
.ticket-pill.is-waiting     { color: #B07CD6; }
.ticket-pill.is-resolved    { color: #35A85B; }
.ticket-pill.is-closed      { color: var(--grey); }

/* ── Key/value meta list ── */
.ticket-meta { list-style: none; margin-bottom: 2rem; }
.ticket-meta li {
display: grid; grid-template-columns: 8rem 1fr;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--ash);
font-size: 0.875rem; font-weight: 300;
color: var(--white);
}
.ticket-meta li span {
font-family: 'JetBrains Mono', monospace;
font-size: 0.5625rem; letter-spacing: 2px; text-transform: uppercase;
color: var(--grey);
padding-top: 0.25rem;
}

/* ── Message bodies ──
   pre-wrap so the line breaks a reporter typed survive, with word-break
   so a pasted URL or stack trace cannot widen the page. */
.ticket-message {
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 0.9375rem; font-weight: 300; line-height: 1.8;
color: var(--white);
}

.ticket-shot {
display: inline-block;
margin-top: 1.25rem;
border: 1px solid var(--ash);
padding: 0.25rem;
max-width: 100%;
}
.ticket-shot img { display: block; max-width: 100%; max-height: 20rem; height: auto; }

/* ── Conversation ── */
.ticket-thread { list-style: none; }
.ticket-thread li {
border: 1px solid var(--ash);
border-left: 3px solid var(--dim);
padding: 1rem 1.25rem;
margin-bottom: 1rem;
}
.ticket-thread li.from-desk { border-left-color: var(--crimson); }

.ticket-thread .who {
font-family: 'JetBrains Mono', monospace;
font-size: 0.5625rem; letter-spacing: 2px; text-transform: uppercase;
color: var(--white);
}
.ticket-thread .when {
font-family: 'JetBrains Mono', monospace;
font-size: 0.5625rem; letter-spacing: 1px;
color: var(--grey);
margin-left: 0.5rem;
}
.ticket-thread .what {
white-space: pre-wrap;
overflow-wrap: anywhere;
margin-top: 0.625rem;
font-size: 0.875rem; font-weight: 300; line-height: 1.7;
color: var(--white);
}

.ticket-empty {
font-size: 0.875rem; font-weight: 300;
color: var(--grey);
padding: 1rem 0;
}

/* ── Bits the form needs that the lead form does not ── */
.form-row input[type="file"] {
font-size: 0.8125rem;
color: var(--grey);
padding: 0.625rem;
background: var(--obsidian);
border: 1px dashed var(--dim);
}
.form-row .req { color: var(--crimson); }

.support-actions {
display: flex; flex-wrap: wrap; gap: 1rem;
margin-top: 2rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
.support-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.support-page { padding-top: 7rem; }
}

@media (max-width: 480px) {
.support-panel { padding: 1.25rem; }
.ticket-ref-block { padding: 1.5rem; }
.ticket-meta li { grid-template-columns: 1fr; gap: 0.25rem; }
.ticket-meta li span { padding-top: 0; }
}

/* ── Small utilities ──
   Kept here rather than as style="" attributes: the site ships a
   Content-Security-Policy and the rest of the codebase keeps presentation
   out of the markup. */
.sec-label-spaced { margin-top: 2.5rem; }
.panel-btn { margin-top: 1.25rem; }