/* Resolvix patches: small fixes found while testing, loaded after staff.css / requester.css.
   Fold these into the main stylesheets once testing settles. */

/* 1) Ticket cards and rows: the subject always keeps a readable width; badges drop onto their own line when there is no room.
   (Before this, a long subject was squeezed to a few letters wide by the badges, which refuse to shrink.) */
.qcard-top, body.is-staff .qrow-top, body.rq .trow-top { flex-wrap: wrap; row-gap: 6px; }
.qcard-subject, body.is-staff .qrow-subject, body.rq .trow-subject { flex: 1 1 200px; min-width: 0; overflow-wrap: break-word; word-break: normal; }
.qcard-pills { flex: 0 1 auto; flex-wrap: wrap; }
body.rq .trow-top .badge { flex: none; }

/* 2) Slim timeline stepper: only the dot and line take a column (12px). The time ("2d ago") sits on one line above the card,
   level with its dot, instead of in its own 46px column beside every card. Applies to the queue and to both ticket threads. */
.qt-item, .tl-item { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 10px; row-gap: 5px; align-items: start; }
.qt-track, .tl-track { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; }   /* stretch: the line needs the full height of the item */
.qt-time, .tl-time { grid-column: 2; grid-row: 1; width: auto; padding: 0; font-size: 12px; line-height: 12px; }
.qt-track::after, .tl-track::after { top: 0; }
.qt-item:not(:last-child) .qt-track::before, .tl-item:not(:last-child) .tl-track::before { top: 10px; }
.qt-item > .qcard, .tl-item > .msg { grid-column: 2; grid-row: 2; }
.thread-more { padding-left: 22px; }

/* 3) Keep the running line unbroken: the last of the earlier messages (inside the collapsible block) still joins the first of the recent ones. */
#thread-older > .tl-item:last-child .tl-track::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: -12px; width: 2px; background: var(--rq-line); }

/* 4) The requester's messages get their own colour (teal), so the three voices read at a glance:
   requester = teal, staff reply = blue, internal note = amber. Same on the staff thread and on the requester's own ticket page. */
body.is-staff, body.rq { --rq-req-bg: #e4f6f2; --rq-req-bd: #9fd9cc; --rq-req-dot: #0f9f77; }
html[data-theme="dark"] body.is-staff, html[data-theme="dark"] body.rq { --rq-req-bg: #0d2626; --rq-req-bd: #1c5252; --rq-req-dot: #2dd4a3; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) body.is-staff, html:not([data-theme="light"]) body.rq { --rq-req-bg: #0d2626; --rq-req-bd: #1c5252; --rq-req-dot: #2dd4a3; }
}
.tl-item.tl-req { --dot: var(--rq-req-dot); --bar: var(--rq-req-dot); }
body.is-staff .tl-req .msg, body.rq .tl-req .msg { background: var(--rq-req-bg); border-color: var(--rq-req-bd); border-left-color: var(--rq-req-bd); }

/* 5) Topic picker (landing page, body.rq-home) on desktop and tablet.
   Phones keep the single-column list. From 640px the topics become stacked cards in a grid
   (2 columns, then 3 from 980px, so the nine topics fill 3 x 3), and the page widens to use the screen.
   The footer stays at the bottom of short pages. */
body.rq-home { min-height: 100vh; display: flex; flex-direction: column; }
body.rq-home > main.wrap { flex: 1 0 auto; width: 100%; }

@media (min-width: 640px) {
    body.rq-home .px-bar-in,
    body.rq-home .wrap { max-width: 1120px; }
    body.rq-home .wrap { padding: 36px 24px 56px; }
    body.rq-home .px-bar-in { padding-left: 24px; padding-right: 24px; }
    body.rq-home h1 { font-size: 34px; margin-bottom: 8px; }
    body.rq-home .lead { font-size: 17px; margin-bottom: 28px; }
    body.rq-home .nudge { padding: 14px 16px; margin-bottom: 26px; }

    body.rq-home .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    body.rq-home .tile {
        position: relative; flex-direction: column; align-items: flex-start; gap: 16px;
        min-height: 164px; padding: 20px; border-radius: 20px;
        transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
    }
    body.rq-home .tile:hover,
    body.rq-home .tile:focus-visible { transform: translateY(-2px); background: var(--rq-surface2); }
    body.rq-home .tile:focus-visible { outline: 2px solid var(--rq-info-strong); outline-offset: 2px; }
    body.rq-home .tile-ico { width: 50px; height: 50px; border-radius: 15px; font-size: 22px; }
    body.rq-home .tile-text { flex: 1 1 auto; width: 100%; padding-right: 6px; }
    body.rq-home .tile-name { font-size: 18px; }
    body.rq-home .tile-desc { display: block; font-size: 14px; line-height: 1.45; margin-top: 6px; }
    body.rq-home .tile-chev { position: absolute; top: 18px; right: 20px; font-size: 26px; line-height: 1; opacity: .55; transition: transform .15s ease, opacity .15s ease, color .15s ease; }
    body.rq-home .tile:hover .tile-chev,
    body.rq-home .tile:focus-visible .tile-chev { transform: translateX(3px); opacity: 1; color: var(--rq-link); }
    body.rq-home .rq-note { padding: 0; margin-top: 24px; font-size: 14px; }
}
@media (min-width: 980px) {
    body.rq-home .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    body.rq-home .tile, body.rq-home .tile-chev { transition: none; }
    body.rq-home .tile:hover, body.rq-home .tile:focus-visible { transform: none; }
}