/* lists.css: Boxes, Waiting and Find (D-052: rows and hairlines, no boxes). Uses the tokens and classes of app.css.
   CLASSES
     .filters .filters-field                 route filter and the text field of Boxes
     .show-more                              the quiet "Show more" button under a list
     .row-link                               a table row that opens its box when pressed anywhere
     .wait-card .wait-none                   a route on Waiting (a link that filters the list); .is-selected when chosen
     .order-row .order-meta .order-items .order-reason   one order on Waiting
     .find-form .find-input                  the field of Find
     .answer-card .answer-lines .answer-line .answer-text .answer-link   the sentences of Find
*/

/* ---------------------------------------------------------------------------------------------- Boxes */
.filters { display: flex; align-items: center; gap: var(--s3) var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.filters-field { flex: 1 1 280px; min-width: 0; max-width: 360px; display: flex; margin-left: auto; }
@media (max-width: 720px) { .filters-field { flex-basis: 100%; max-width: none; margin-left: 0; } }
.show-more { margin-top: var(--s3); }
.row-link { cursor: pointer; }
.row-link:hover td { background: var(--bg-2); }

/* ---------------------------------------------------------------------------------------------- Waiting */
.grid-3:has(> .wait-card) { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wait-card { display: flex; flex-direction: column; gap: var(--s1); border: 0; border-radius: 0; padding: var(--s4) var(--s4) var(--s4) 0; }
.wait-card + .wait-card { border-left: 1px solid var(--line); padding-left: var(--s4); }
.wait-card .card-head { margin-bottom: 0; }
.wait-card.is-selected .card-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 720px) {
  .wait-card { padding: var(--s3) 0; }
  .wait-card + .wait-card { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}
.wait-none { display: flex; align-items: center; gap: var(--s2); color: var(--muted); }
.wait-none .icon { color: var(--ok); }
.order-row { align-items: start; }
.order-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.order-items { list-style: none; margin: var(--s1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.order-items li { font-size: var(--fs-small); line-height: 1.45; overflow-wrap: anywhere; }
.order-reason { font-size: var(--fs-small); line-height: 1.45; color: var(--look); margin-top: var(--s1); }

/* ---------------------------------------------------------------------------------------------- Find */
.find-form { display: flex; gap: var(--s2); flex-wrap: nowrap; margin-bottom: var(--s6); max-width: 640px; }
.find-input { flex: 1 1 auto; min-width: 0; }
.find-form .btn { flex: none; }
@media (max-width: 600px) { .find-form { flex-wrap: wrap; } .find-form .btn { width: 100%; } }
.answer-card { border: 0; border-radius: 0; padding: 0; }
.answer-card .card-title { margin-bottom: var(--s2); }
.answer-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.answer-line { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.answer-text { font-size: var(--fs-body); line-height: 1.5; max-width: 72ch; }
.answer-link { display: inline-flex; align-items: center; min-height: 32px; font-weight: 500; }
.answer-card .row-between { justify-content: space-between; margin-bottom: var(--s2); }
.answer-card .row-between .card-title { margin-bottom: 0; }