/* ====================================================================
   SCREEN 51 — ASK, the desk's "Questions" group (21, exams/desk.html)
   (slice Q51, 2026-10-10). Contract:
   docs/design/pharmacy/briefs/2026-10-10_screen-51-ask-contract.md
   (R5, §3 words, §4 "Questions group placement").

   js/exams/thread-host.js writes the rows (.vm-qs-*); desk.html holds
   the group's two places (.vm-dk-qs: a section with 21's own heading),
   desk.js fills one: first (above "To answer") while a question is
   unread, else last (after Coming days; from 1120 at the foot of main).
   One row = 50e's idiom (the pharmacy's messages list, copied here,
   never linked): tile 38 | the asker's name (14.5/700) with the time at
   the right | "Question" and, unread, " · 1 new message" (teal 700) |
   the chevron. Unread washes #f4fbf9, its time and chevron teal.

   exams/desk.html only, linked after 50-thread-host.css and before
   desktop/shared.css (not a desktop file: its wide rules sit in the
   min-width block, 50-thread-host.css's precedent). Tiers:
     <901    one bordered container of rows (radius 18), as 50e.
     >=901   the same container as the day's ledger (radius 18, the
             #f0f2f4 hairline), rows 64 at 15/13; the opened question
             (its thread in the 440 panel) wears the row's 2px ring.

   Literal values; Inter; teal #0f6d5c, mint #e3f4f0; never a blue, a
   yellow or an orange. Every target 44 (rows 64).
   ==================================================================== */


/* ====================================================================
   1. THE ROWS (phone): 50e's
   ==================================================================== */
.vm-qs-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
}
.vm-qs-item { margin: 0; padding: 0; }
.vm-qs-item + .vm-qs-item { border-top: 1px solid #f0f2f4; }
.vm-qs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 12px 11px 14px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #0f172a;
    font: inherit;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.vm-qs-row.is-unread { background: #f4fbf9; }
.vm-qs-row:active { background: #f8fafc; }
.vm-qs-row:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }
.vm-qs-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #e3f4f0;
    color: #0f6d5c;
    font-size: 15px;
}
.vm-qs-text { display: block; flex: 1; min-width: 0; }
.vm-qs-l1 {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.vm-qs-who {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    overflow-wrap: anywhere;
}
.vm-qs-when {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vm-qs-row.is-unread .vm-qs-when { color: #0f6d5c; }
.vm-qs-l2 {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #475569;
    font-variant-numeric: tabular-nums;
}
.vm-qs-sep { color: #cbd5e1; }
.vm-qs-new {
    font-size: 11.5px;
    font-weight: 700;
    color: #0f6d5c;
    white-space: nowrap;
}
.vm-qs-chev {
    flex-shrink: 0;
    width: 13px;
    font-size: 13px;
    color: #64748b;
}
.vm-qs-row.is-unread .vm-qs-chev { color: #0f6d5c; }


/* ====================================================================
   2. FROM 901: the day's ledger's container, the row's ring
   ==================================================================== */
@media (min-width: 901px) {
    #vm-exams-desk .vm-dk-qs .vm-qs-list { border-radius: 18px; }
    #vm-exams-desk .vm-dk-qs .vm-qs-row { padding: 12px 18px; gap: 14px; }
    #vm-exams-desk .vm-dk-qs .vm-qs-tile { width: 40px; height: 40px; border-radius: 12px; }
    #vm-exams-desk .vm-dk-qs .vm-qs-who { font-size: 15px; }
    #vm-exams-desk .vm-dk-qs .vm-qs-when { font-size: 12.5px; }
    #vm-exams-desk .vm-dk-qs .vm-qs-l2 { font-size: 13px; }
    #vm-exams-desk .vm-dk-qs .vm-qs-new { font-size: 12px; }

    /* The opened question (its thread in the 440 panel): the row's ring,
       as 50-desk.css draws it on a visit's row. */
    #vm-exams-desk .vm-qs-row.is-mh-open { box-shadow: inset 0 0 0 2px #0f6d5c; }
}


/* ====================================================================
   3. HOVER (a pointer that can hover)
   ==================================================================== */
@media (hover: hover) {
    .vm-qs-row:hover { background: #f8fafc; }
    .vm-qs-row.is-unread:hover { background: #e3f4f0; }
}