/* ====================================================================
   SCREEN 44 WHAT CAME IN (the customer's list), the desktop layer
   (desktop phase 43-49). pharmacy/came-in.html only, linked after
   desktop/shared.css. Never the counter's 36 (36-came-in.css, .vm-ci-*).
   Sheet: docs/design/pharmacy/screens/44/desktop/FACTS.md.
   Every rule inside a min-width query; the phone (app.css 29h) is
   byte-frozen.

   Desktop slice H2, 2026-10-10. Frames 44-d (2 not opened), 44-d-back,
   44-d-none (nothing came in yet), 44-d-narrow (1000) and 44-d-states
   (44-ds-all, 44-ds-fail, the rows, loading, the failed read, logged
   out) in docs/design/pharmacy/screens/44/desktop/frame.html; record
   screens/desktop-43-49/records/Screen 44 - desktop design pass.md (the
   pass wins over the work order's call 2). Brief:
   briefs/2026-10-10_desktop-slice-H2.md.

   Tiers: >=901 the layer — the 480 column unwinds (.vm-dt-shell), 20-d's
   customer header is glass over the band (desktop.js), the band is dark
   in the customer's light (.vm-dt-band--customer): one exit "Account",
   the h1 "What came in · the last 30 days" at 12.5 in the accent, the
   count at 40 as the headline, and "Mark all as read" a 48 glass pill
   at the list column's right edge, level with the count, only while
   something is unread (came-in-page.js moves the phone's foot node onto
   the band from 901: one button, one handler; no foot bar). Under it ONE
   column of 36-d's day cards at the left of the 1200 column: 760 from
   901 to 1119, 764 from 1120 (the 340 column beside it stays empty).
   Day titles are not sticky: the page scrolls.

   Sections, in the frame's order:
     1. The band: the exit, the label, the count, the pill and its
        failure line
     2. The body: one column on the wash
     3. The day cards and the rows
     4. The end of the list
     5. States: loading, nothing came in, the failed read, logged out
     6. Hover (a pointer that can hover)
   ==================================================================== */


/* ====================================================================
   1. THE BAND (44-d, 44-d-narrow, 44-ds-fail)
   The glass header (65 with its hairline) sits over the band's top, so
   the band's content starts 6 under it. One grid in the list column's
   width (760, then 764: the right padding gives the rest of the 1200
   column back), its content at the left:
       the exit "Account"            |
       the label (the h1)            |  the failure line (white)
       the count at 40               |  Mark all as read (48)
   The pill's block sits on the band's foot, 2 above the count's line.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-cc-band {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 24px;
        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-cc-band::before { display: none; }
    .vm-cc-band > .vm-or-orient {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }
    .vm-cc-band .vm-cc-back { gap: 7px; font-size: 13.5px; }
    .vm-cc-band .vm-cc-back i { font-size: 14px; }
    .vm-cc-band > .vm-cc-label {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        margin: 8px 0 0;
        font-size: 12.5px;
    }
    .vm-cc-band > .vm-cc-head {
        grid-column: 1;
        grid-row: 3;
        min-width: 0;
        margin: 4px 0 0;
        font-size: 40px;
        letter-spacing: -1.2px;
        line-height: 1.1;
        text-wrap: balance;
    }

    /* The phone's foot, moved here from 901: no bar, no hairline, no
       ground; the failure line above the pill, both at the right. */
    .vm-cc-band > .vm-cc-foot {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: end;
        position: relative;
        z-index: auto;
        min-width: 0;
        margin: 0;
        padding: 0 0 2px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        border: 0;
        background: transparent;
    }
    .vm-cc-band .vm-cc-footfail {
        margin: 0;
        gap: 8px;
        font-size: 13.5px;
        font-weight: 600;
        color: #fff;
        line-height: 1.45;
        text-align: right;
    }
    .vm-cc-band .vm-cc-footfail i { margin-top: 4px; font-size: 12px; color: #8ff08b; }
    .vm-cc-band .vm-cc-all {
        width: auto;
        height: 48px;
        padding: 0 24px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .1);
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
        color: #fff;
        font-size: 14.5px;
        font-weight: 700;
        white-space: nowrap;
    }
    .vm-cc-band .vm-cc-all:focus-visible { outline-color: #fff; }
}

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


/* ====================================================================
   2. THE BODY: the 1200 column (the padding does it, so the wash runs
   the full width), 24 under the band, 72 at the foot; its content one
   column at the left, 760 then 764, 18 between the days. The wash
   starts at the body's top, as the frames draw it.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-cc-body {
        gap: 18px;
        padding: 24px max(24px, calc((100% - 1152px) / 2)) 72px;
        background: linear-gradient(180deg, #f4fbf9 0%, #f8fafc 420px);
    }
    .vm-cc-body > * { max-width: 760px; }
}

@media (min-width: 1120px) {
    .vm-cc-body > * { max-width: 764px; }
}


/* ====================================================================
   3. THE DAY CARDS AND THE ROWS (36-d's, at the column's width)
   A day: its title (Space Grotesk 14, not sticky) 8 over one white
   card, radius 16, #e2e8f0. A row: 64 at least, 11 16, 14 between the
   38 tile, the event over the thing (the clock on line 1's baseline)
   and the chevron. Unread rows keep the code's faint wash (#f4fbf9),
   700 with a teal clock; read rows 500 on white.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-cc-daytitle { font-variant-numeric: tabular-nums; }
    .vm-cc-box { border-radius: 16px; }
    .vm-cc-row { padding: 11px 16px; gap: 14px; }
    a.vm-cc-row:focus-visible { outline-color: #0f6d5c; }
}


/* ====================================================================
   4. THE END OF THE LIST: the marker 12.5/600 between two rules, 16
   each side ("That is the last 30 days" / "The latest 100 are shown").
   ==================================================================== */
@media (min-width: 901px) {
    .vm-cc-end {
        gap: 16px;
        font-size: 12.5px;
        font-weight: 600;
        color: #64748b;
    }
}


/* ====================================================================
   5. STATES (44-d-none, 44-d-states)
   While the read runs: the band has its label and no headline, no
   pill; one quiet line at 14. Nothing came in: the band says it at
   40; the one sentence at 15. The read failed with nothing on screen:
   one lifted card, the line and Try again (44, mint, its glyph from
   901) in one row. Logged out: 20's group at the column's width, the
   words left and Log in (48, solid, its own width) right.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-cc-body > .vm-loading { font-size: 14px; color: #475569; }
    .vm-cc-body > .vm-cc-empty { font-size: 15px; }

    .vm-cc-fail {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 16px 18px;
    }
    .vm-cc-failline { flex: 1; min-width: 0; font-size: 14px; }
    .vm-cc-retry {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 20px;
    }
    .vm-cc-retry i { font-size: 12.5px; }

    .vm-cc-body > .vm-ac-out {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 24px;
        align-items: center;
        padding: 22px 24px;
    }
    .vm-cc-body .vm-ac-out-t {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        font-family: 'Inter', -apple-system, sans-serif;
        letter-spacing: normal;
    }
    .vm-cc-body .vm-ac-out-s {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        font-size: 14px;
    }
    .vm-cc-body .vm-ac-out-go {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin: 0;
        padding: 0 26px;
        background: #0f6d5c;
        box-shadow: none;
        font-size: 14.5px;
        white-space: nowrap;
    }
    .vm-cc-body .vm-ac-out-go:focus-visible { outline-color: #0f6d5c; }
}


/* ====================================================================
   6. HOVER (the frames' style-hover values)
   ==================================================================== */
@media (min-width: 901px) and (hover: hover) {
    .vm-cc-band .vm-back.vm-back--band:hover { color: #8ff08b; }
    .vm-cc-band .vm-cc-all:not([aria-disabled="true"]):hover { background: rgba(255, 255, 255, .18); }
    a.vm-cc-row:hover { background: #f8fafc; color: #0f172a; }
    a.vm-cc-row.is-unread:hover { background: #e3f4f0; }
    .vm-cc-retry:hover { background: #d3ede6; }
    .vm-cc-body .vm-ac-out-go:hover { background: #0c5b4c; color: #fff; }
}