/* ====================================================================
   SCREEN 50 MESSAGES — the customer's list (pharmacy/messages.html with
   no thread= and no kind=). Slice M20, 2026-10-10: ruling R8 of
   docs/design/pharmacy/briefs/2026-10-10_screen-20-redo-contract.md.
   The rows are 50e's (docs/design/pharmacy/screens/50/FACTS.md); the
   page is 44's frame (came-in.html), copied here, never linked: the band
   with one way back ("Account"), then one column of rows.
   js/pharmacy/messages-list.js draws it.

   messages.html only, linked after 50-messages.css and before
   desktop/shared.css. Its own classes (.vm-ml-*); the hub's band
   (.vm-or-band, .vm-or-orient: app.css), the back control (.vm-back
   .vm-back--band), the customer's band light (.vm-dt-band--customer:
   shared.css) and 50g's card (.vm-ms-card: 50-messages.css) are used as
   they are.

   Tiers:
     <901    the phone: the band (back "Account", "Messages" at 30), the
             rows in one bordered container on the grey ground.
     >=901   44-d: the glass header over the band (Account lit), the band
             in the 1200 column with its content in the list column, the
             title at 40; under it ONE column on the wash, 760 from 901,
             764 from 1120 (the 340 column beside it stays empty).

   Sections:
     1. Which half of the page shows
     2. The band (phone)
     3. The body and the rows (phone)
     4. States (phone): loading, nothing yet, the cards
     5. From 901: the band, the body, the rows, the states
     6. Hover
   ==================================================================== */


/* ====================================================================
   1. WHICH HALF SHOWS. The thread's head and body (display set by
   50-messages.css and its desktop file) and the list's band and body
   keep their `hidden` at every width.
   ==================================================================== */
.vm-ms-top[hidden],
.vm-ms-body[hidden],
.vm-ml-band[hidden],
.vm-ml-body[hidden],
.vm-ml-list[hidden],
.vm-ml-empty[hidden],
.vm-ml-loading[hidden] { display: none; }


/* ====================================================================
   2. THE BAND (phone): 44b's — the hub's dark band, its 44px row spent
   on the one way back, then the page's name as the headline.
   ==================================================================== */
.vm-ml-band { line-height: 1.5; }
.vm-ml-title {
    position: relative;
    margin: 6px 0 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1.1;
}


/* ====================================================================
   3. THE BODY AND THE ROWS (phone), 50e:
   one container, 1px #e2e8f0, radius 18, white; a row 64 at least,
   11 12 11 14, 12 between the 38 tile, the two lines and the chevron.
   Unread: the #f4fbf9 wash, the time and the chevron teal, the door
   words teal 700. Read (and closed): white, grey time and chevron.
   ==================================================================== */
.vm-ml-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px 14px 18px;
    line-height: 1.5;
}
.vm-ml-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
}
.vm-ml-item + .vm-ml-item { border-top: 1px solid #f0f2f4; }
.vm-ml-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    box-sizing: border-box;
    padding: 11px 12px 11px 14px;
    background: #fff;
    color: #0f172a;
    text-align: left;
    text-decoration: none;
}
.vm-ml-row:hover,
.vm-ml-row:visited { color: #0f172a; }
.vm-ml-row.is-unread { background: #f4fbf9; }
.vm-ml-row:active { background: #f8fafc; }
.vm-ml-row:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }
.vm-ml-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: 14px;
}
.vm-ml-text { flex: 1; min-width: 0; }
.vm-ml-l1 {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.vm-ml-who {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    overflow-wrap: anywhere;
}
.vm-ml-when {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vm-ml-row.is-unread .vm-ml-when { color: #0f6d5c; }
.vm-ml-l2 {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #475569;
    font-variant-numeric: tabular-nums;
}
/* A reference never breaks at its dash. */
.vm-ml-ref { white-space: nowrap; }
.vm-ml-sep { color: #cbd5e1; }
.vm-ml-new {
    font-size: 11.5px;
    font-weight: 700;
    color: #0f6d5c;
    white-space: nowrap;
}
.vm-ml-chev {
    flex-shrink: 0;
    width: 13px;
    font-size: 13px;
    color: #64748b;
}
.vm-ml-row.is-unread .vm-ml-chev { color: #0f6d5c; }


/* ====================================================================
   4. STATES (phone)
   While the read runs, one quiet line. Nothing yet: two lines on the
   grey ground (44d's place). The failed read and signed out: 50g's card
   (.vm-ms-card), here at the column's width with no margin of its own.
   ==================================================================== */
.vm-ml-loading {
    margin: 0;
    padding: 4px 2px;
    font-size: 13px;
    color: #64748b;
}
.vm-ml-empty { margin: 12px 4px 0; }
.vm-ml-empty-t {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
}
.vm-ml-empty-s {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
    text-wrap: pretty;
}
.vm-ml-body > .vm-ms-card { margin: 0; }


/* ====================================================================
   5. FROM 901 (44-d): the glass header (65 with its hairline) sits over
   the band's top, so the band's content starts 6 under it; the band and
   the body share the list column's left edge in the 1200 column.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-ml-band {
        padding-top: 71px;
        padding-bottom: 32px;
        padding-left: max(24px, calc((100% - 1152px) / 2));
        padding-right: max(24px, calc(100% - 760px - max(24px, calc((100% - 1152px) / 2))));
        border: 0;
    }
    /* The phone's light lies in the band's own background here. */
    .vm-ml-band::before { display: none; }
    .vm-ml-band .vm-ml-back { gap: 7px; font-size: 13.5px; }
    .vm-ml-band .vm-ml-back i { font-size: 14px; }
    .vm-ml-title {
        margin: 8px 0 0;
        font-size: 40px;
        letter-spacing: -1.2px;
        line-height: 1.1;
        text-wrap: balance;
    }

    .vm-ml-body {
        gap: 18px;
        padding: 24px max(24px, calc((100% - 1152px) / 2)) 72px;
        background: linear-gradient(180deg, #f4fbf9 0%, #f8fafc 420px);
    }
    .vm-ml-body > * {
        width: 100%;
        max-width: 760px;
        box-sizing: border-box;
    }

    /* 44-d's rows at the column's width. */
    .vm-ml-list { border-radius: 16px; }
    .vm-ml-row { padding: 11px 16px; gap: 14px; }

    .vm-ml-loading { padding: 0; font-size: 14px; color: #475569; }
    .vm-ml-empty { margin: 12px 0 0; }
    .vm-ml-empty-t { font-size: 16px; }
    .vm-ml-empty-s { font-size: 15px; }
}

@media (min-width: 1120px) {
    .vm-ml-band {
        padding-right: max(24px, calc(100% - 764px - max(24px, calc((100% - 1152px) / 2))));
    }
    .vm-ml-body > * { max-width: 764px; }
}


/* ====================================================================
   6. HOVER (a pointer that can hover)
   ==================================================================== */
@media (hover: hover) {
    .vm-ml-row:hover { background: #f8fafc; }
    .vm-ml-row.is-unread:hover { background: #e3f4f0; }
}
@media (min-width: 901px) and (hover: hover) {
    .vm-ml-band .vm-back.vm-back--band:hover { color: #8ff08b; }
}