/* ================================================================
   SCREEN 40 — THE PRESCRIPTION THE COUNTER CANNOT FILL (40a–40e)
   Handoff: docs/design/pharmacy/screens/40/{README.md,frame.html}
   (owner rulings Sept 29 2026). Additions to 09b
   (pharmacy/queue-prescription.html) and words on the customer's 06
   (pharmacy/order.html) and 16 (pharmacy/orders.html). Loaded AFTER
   app.css on those three pages only, so every rule here is the frame's
   value for this screen and nothing else moves.

   The act is prescription blue #1b6fa8 (white text, 4.6:1) on both
   sides: it answers a prescription, like Send quote. No red, no
   yellow or orange; the refusal is ink with fa-circle-exclamation.
   ================================================================ */

/* -- 40a: the bar when every line is Not in stock ---------------- */
/* The frame's column: the headline over its sub-line, then the one act
   full width, 11px apart, 14px under it. */
.vm-q-send.is-none {
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    padding: 13px 14px 14px;
}
.vm-q-send-none-t {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: var(--vph-ink);
}
.vm-q-send-none-s { font-size: 12px; color: var(--vph-ink-3); margin-top: 3px; }
.vm-q-send-btn.vm-q-nofill { flex: 0 0 auto; width: 100%; }

/* -- 40e: "Nothing priced yet" beside a Send quote that is off ---- */
/* The words take the row at 18px; the switched-off control keeps its
   own width. Disabled is #e2e8f0 under #475569 (the frame's 40e). */
.vm-q-send.is-empty .vm-q-send-id { flex: 1 1 auto; }
.vm-q-send.is-empty .vm-q-money-22 {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -.3px;
    margin-top: 0;
}
.vm-q-send.is-empty .vm-q-send-btn { flex: 0 0 auto; padding: 0 18px; }
.vm-q-send-btn[disabled] { background: var(--vph-grey); color: var(--vph-ink-3); box-shadow: none; }

/* -- 40a: the lines, flat and struck ----------------------------- */
/* `.is-out` already recesses and strikes the line; with no sentence
   under it the row closes 12px under its chip, as the frame draws. */
.vm-q-lines--none .vm-q-line.is-out { padding: 12px 14px; }

/* -- 40b: "Tell Paul" — the frame's full-height sheet ------------- */
/* 44px of the dim above it, the grab handle 9px under the top edge,
   the foot pinned at the bottom. `:not([hidden])` so the hidden
   attribute still wins while it is closed. */
.vm-q-app ~ .vm-sheet.vm-q-nf-sheet:not([hidden]) {
    top: 44px;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.vm-q-app ~ .vm-sheet.vm-q-nf-sheet .vm-sheet-grab { margin: 9px auto 0; flex-shrink: 0; }
.vm-q-nf-sheet > [data-sheet-body] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.vm-q-nf { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vm-q-nf-head {
    flex-shrink: 0;
    padding: 8px 8px 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-q-nf-id { flex: 1; min-width: 0; }
.vm-q-nf-title {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.3px;
    color: var(--vph-ink);
}
.vm-q-nf-ref { font-size: 12px; color: var(--vph-ink-4); margin-top: 2px; font-variant-numeric: tabular-nums; }
.vm-q-nf-cancel {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 12px;
    background: transparent;
    color: var(--vph-primary-dark);
    font-size: 14px;
    font-weight: 700;
}
.vm-q-nf-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* The headline block is the sentence the customer reads, in 06's own
   words, on part 1's prescription tint. */
.vm-q-nf-reads { background: #eef6fc; border-radius: 16px; padding: 13px 14px 14px; }
.vm-q-nf-lbl { font-size: 11.5px; font-weight: 700; color: var(--vph-rx-solid); }
.vm-q-nf-say {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.5px;
    color: var(--vph-ink);
    margin-top: 4px;
    text-wrap: pretty;
}
/* One white row per consequence (40b, 40c, 40e). */
.vm-q-nf-row {
    margin-top: 11px;
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-q-nf-row + .vm-q-nf-row { margin-top: 8px; }
.vm-q-nf-row i {
    font-size: 12px;
    color: var(--vph-rx-solid);
    flex-shrink: 0;
    margin-top: 3px;
    width: 14px;
    text-align: center;
}
.vm-q-nf-row span { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; }
.vm-q-nf-row--grey i { color: var(--vph-ink-3); }
.vm-q-nf-word { display: flex; flex-direction: column; gap: 8px; }
.vm-q-nf-wlbl { font-size: 13px; font-weight: 700; color: var(--vph-ink); padding: 0 2px; }
.vm-q-nf-wlbl span { font-weight: 500; color: var(--vph-ink-4); }
.vm-q-nf-field {
    width: 100%;
    min-height: 88px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 11px 12px;
    font-family: var(--vph-font-body);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--vph-ink);
    resize: vertical;
    field-sizing: content;
}
.vm-q-nf-field:focus { outline: none; border-color: var(--vph-primary); }
.vm-q-nf-word .vm-q-sign { padding: 0 2px; }
.vm-q-nf-foot {
    flex-shrink: 0;
    border-top: 1px solid var(--vph-hairline);
    padding: 14px 18px 22px;
    background: #fff;
}
/* A refusal is said here, in ink, never in a toast. */
.vm-q-nf-fail {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 10px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--vph-ink);
}
.vm-q-nf-fail[hidden] { display: none; }
.vm-q-nf-fail i { font-size: 12px; margin-top: 3px; }
.vm-q-nf-go {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-rx-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(27, 111, 168, .28);
}
.vm-q-nf-go[disabled] { background: var(--vph-grey); color: var(--vph-ink-3); box-shadow: none; }

/* -- 40c: the record ---------------------------------------------- */
/* The frame's body opens 18px under the header (the column's 14px and
   4px here); one lifted card, the answer in a grey block, the struck
   lines in a bordered group, two doors under a hairline. */
.vm-q-rec {
    margin-top: 4px;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .08);
}
.vm-q-rec-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.vm-q-rec-ans { background: var(--vph-grey-2); border-radius: 14px; padding: 12px 14px 14px; }
.vm-q-rec-lbl { font-size: 11.5px; font-weight: 700; color: var(--vph-ink-3); font-variant-numeric: tabular-nums; }
.vm-q-rec-title {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.5px;
    color: var(--vph-ink);
    margin-top: 4px;
}
.vm-q-rec-lines { border: 1px solid var(--vph-grey); border-radius: 14px; overflow: hidden; }
.vm-q-rec-line { padding: 11px 14px; display: flex; align-items: center; gap: 10px; }
.vm-q-rec-line + .vm-q-rec-line { border-top: 1px solid var(--vph-hairline); }
.vm-q-rec-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--vph-ink-3);
    text-decoration: line-through;
}
.vm-q-rec-out { font-size: 12px; color: var(--vph-ink-4); flex-shrink: 0; }
/* 40c keeps what she wrote (the desktop design pass, Oct 9 2026; desktop
   slice G5, at both widths): under the struck lines, renderReadOnly's
   words — "What you wrote", the word, the counter's signature — only when
   one was sent. Bordered like the lines: it is part of the record. */
.vm-q-rec-word { border: 1px solid var(--vph-grey); border-radius: 14px; padding: 11px 14px 12px; }
.vm-q-rec-wlbl { font-size: 11.5px; font-weight: 700; color: var(--vph-ink-3); }
.vm-q-rec-say {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--vph-ink);
    overflow-wrap: anywhere;
}
.vm-q-rec-word .vm-q-sign { margin-top: 4px; }
.vm-q-rec-foot {
    border-top: 1px solid var(--vph-hairline);
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vm-q-rec-wa {
    width: 100%;
    height: 48px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid var(--vph-sep);
    color: var(--vph-ink);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.vm-q-rec-wa:hover { color: var(--vph-ink); }
.vm-q-rec-wa i { font-size: 15px; color: var(--vph-primary-dark); }
.vm-q-rec-back {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vph-primary-dark);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.vm-q-rec-back:hover { color: var(--vph-primary-dark); }

/* -- 40d: the customer's 06 card (not filled, and not answered) ---- */
/* Bordered, not lifted (`.vm-od-rx--fact`): an answer is a fact. The
   frame's own line box, 1.5, on the card's two halves. */
.vm-od-nf-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; line-height: 1.5; }
.vm-od-nf-lbl {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--vph-rx-solid);
}
.vm-od-nf-lbl i { font-size: 12px; }
.vm-od-nf-title {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.5px;
    color: var(--vph-ink);
    text-wrap: pretty;
}
/* 40e: a send nobody answered is said a step quieter. */
.vm-od-nf-title--quiet { font-size: 20px; letter-spacing: -.4px; }
.vm-od-nf-word {
    background: var(--vph-grey-2);
    border-radius: 14px;
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.vm-od-nf-say { font-size: 13.5px; color: var(--vph-ink); line-height: 1.5; overflow-wrap: anywhere; }
.vm-od-nf-sign { font-size: 12.5px; font-weight: 700; color: var(--vph-ink-3); font-variant-numeric: tabular-nums; }
.vm-od-nf-row {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-od-nf-row i {
    font-size: 12px;
    color: var(--vph-rx-solid);
    flex-shrink: 0;
    margin-top: 3px;
    width: 14px;
    text-align: center;
}
.vm-od-nf-row span { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; }
.vm-od-nf-plain { font-size: 12.5px; color: var(--vph-ink-3); line-height: 1.45; }
.vm-od-nf-go {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-rx-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-decoration: none;
}
.vm-od-nf-go:hover,
.vm-od-nf-go:visited { color: #fff; }
.vm-od-nf-go i { font-size: 13px; }
/* 33a's door, footed: the photograph's own day under its name. */
.vm-od-nf-foot { border-top: 1px solid var(--vph-hairline); padding: 6px 14px 8px; line-height: 1.5; }
/* The frame draws it as a <button>, whose text keeps the UA's `normal`
   line box; the page's buttons inherit 1.5, so it is restated here. */
.vm-od-nf-rm {
    width: 100%;
    min-height: 52px;
    padding: 0;
    line-height: normal;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
}
.vm-od-nf-rm[aria-disabled="true"] { opacity: .65; }
.vm-od-nf-rm > i:first-child { font-size: 13px; color: var(--vph-ink-3); width: 16px; text-align: center; flex-shrink: 0; }
.vm-od-nf-rm-main { flex: 1; min-width: 0; }
.vm-od-nf-rm-t { display: block; font-size: 13.5px; font-weight: 700; color: var(--vph-ink); }
.vm-od-nf-rm-s { display: block; font-size: 12px; color: var(--vph-ink-3); margin-top: 1px; }
.vm-od-nf-rm > i:last-child { font-size: 12px; color: var(--vph-ink-4); flex-shrink: 0; }

/* -- 40d: 16's row under Today ------------------------------------ */
/* The frame's row: a prescription tile where the date tile sits, the
   answer as the title and the counter with its clock under it. No
   money: nothing was paid. */
.vm-or-row.vm-or-row--rx { padding: 10px 12px 10px 14px; }
.vm-or-rxtile {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-or-rxtile i { font-size: 14px; }
.vm-or-row--rx .vm-or-row-t { font-size: 14px; font-weight: 700; line-height: normal; }
.vm-or-row--rx .vm-or-row-s { font-size: 12px; line-height: normal; font-variant-numeric: tabular-nums; }