/* ==================================================================================================
 * THE RFQ DETAIL AND QUOTE SCREEN — boards 1a to 1m of docs/Design/vendor-portal/RFQ Quote.dc.html.
 *
 * THE NUMBERS ARE THE DESIGN'S. Every size, gap, radius and colour below is transcribed from the design's own
 * inline styles and its own script constants: the 52px dark top bar, the 26px serif title, the 22px state chip,
 * the five-cell meta grid, the eight-column bill row, the 320px sidebar, the 452px refusal panel. They are
 * literal hex rather than the --app-* tokens above, because the vendor design's palette is its own and those
 * tokens belong to the operator portal.
 *
 * DIRECTION IS LOGICAL. margin-inline, padding-inline, inset-inline-end and text-align: end are used throughout,
 * so the same sheet mirrors when the frame is drawn right to left and no second sheet exists for Arabic.
 *
 * WHAT THIS SHEET DOES NOT DO. It does not restyle a shared class: every override of one is scoped under .vp-rfq,
 * so the vendor's other pages keep the values they had. The design's own 36px buttons and 34px fields are smaller
 * than the shared .vp-btn/.vp-input, which is why the screen carries its own control family rather than bending the
 * shared one. The dark top bar is the shared one (VendorAppBar), which every signed-in vendor page draws.
 * ================================================================================================== */
/* A control the page hides until the browser reveals it — the blocked notice, a filtered-out row, a line's closed
   note — must actually disappear, and [hidden] loses to the display rules below. */
.vp-rfq [hidden] {
    display: none !important;
}

/* The two questions the page asks are native <dialog>s: the browser keeps the focus inside an open one and makes the
   page behind it inert. A closed one is never drawn, whatever the rules below give an open one; and while one is
   open the page behind it does not scroll. */
.vp-rfq dialog:not([open]) {
    display: none;
}

html:has(.vp-rfq dialog[open]) {
    overflow: hidden;
}

.vp-rfq dialog::backdrop {
    inset-block-start: var(--vp-rfq-top, 52px);
    background: rgba(20, 20, 19, 0.28);
}

/* ---------------------------------------------------------------- the bill and the sidebar, side by side */
.vp-rfq-body {
    flex-grow: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
}

.vp-rfq-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--app-paper);
    border: 1px solid var(--app-line);
    border-radius: 12px;
}

/* ---------------------------------------------------------------- the filter chips and Find a line */
.vp-rfq-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--app-line);
}

.vp-rfq-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vp-rfq-chipbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid #d5d0c3;
    border-radius: 14px;
    background: var(--app-paper);
    color: #3f3d38;
    font-family: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.vp-rfq-chipbtn-on,
.vp-rfq-chipbtn[aria-pressed="true"] {
    border-color: #141413;
    background: #141413;
    color: #faf9f5;
}

.vp-rfq-chipnum {
    color: var(--app-muted);
    font-variant-numeric: tabular-nums;
}

.vp-rfq-chipbtn-on .vp-rfq-chipnum,
.vp-rfq-chipbtn[aria-pressed="true"] .vp-rfq-chipnum {
    color: #d5d0c3;
}

/* The design pushes the Find box to the far end of the toolbar. margin-inline-start does it without a spacer
   element, and mirrors with the frame. */
.vp-rfq-find {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

.vp-rfq-findlabel {
    font-size: 12px;
    color: var(--app-muted);
}

.vp-rfq-findinput {
    height: 30px;
    width: 190px;
    padding: 0 10px;
    border: 1px solid #d5d0c3;
    border-radius: 7px;
    background: var(--app-paper);
    font-family: inherit;
    font-size: 12px;
    color: var(--app-ink);
}

/* ---------------------------------------------------------------- the bill grid */
.vp-rfq-grid {
    flex-grow: 1;
    min-height: 0;
    overflow: auto;
}

.vp-rfq-headrow {
    display: grid;
    grid-template-columns: 40px 88px minmax(0, 1fr) 44px 84px 124px 76px 132px;
    column-gap: 10px;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-bottom: 1px solid var(--app-line);
    background: var(--app-sunken);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b6862;
}

.vp-rfq-c-qty,
.vp-rfq-c-rate,
.vp-rfq-c-amount {
    text-align: end;
}

.vp-rfq-c-inc {
    text-align: center;
}

.vp-rfq-row {
    display: grid;
    grid-template-columns: 40px 88px minmax(0, 1fr) 44px 84px 124px 76px 132px;
    column-gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 4px 16px;
    border-bottom: 1px solid #f0ede4;
    font-size: 12.5px;
}

.vp-rfq-c-num,
.vp-rfq-c-code {
    color: var(--app-muted);
    font-variant-numeric: tabular-nums;
}

.vp-rfq-c-code {
    font-size: 11.5px;
}

.vp-rfq-c-desc {
    line-height: 1.4;
}

/* A line's description carries its note under it — the preview, then the control that opens it. A client's long
   unbroken word wraps inside the cell rather than pushing the numbers off the row. */
.vp-rfq-row .vp-rfq-c-desc {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.vp-rfq-desc {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* A line the page moves the focus to — the first one "Show more" revealed — is outlined only for a keyboard. */
.vp-rfq-row:focus {
    outline: none;
}

.vp-rfq-row:focus-visible {
    outline: 2px solid var(--app-link);
    outline-offset: -2px;
}

.vp-rfq-c-unit {
    color: #4d4b46;
}

.vp-rfq-c-qty {
    color: #4d4b46;
    font-variant-numeric: tabular-nums;
}

.vp-rfq-rate {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d5d0c3;
    border-radius: 6px;
    background: var(--app-paper);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--app-ink);
    text-align: right;
    direction: ltr;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}

/* The same box in its other states: refused by a check or by the door, and not offered at all — on a line marked
   Included, on a line the client's bill gives no quantity, and on a board where nothing may be typed. */
.vp-rfq-rate[aria-invalid="true"] {
    border: 1px solid var(--app-danger);
    box-shadow: 0 0 0 1px var(--app-danger);
    background: var(--app-paper);
}

.vp-rfq-rate:disabled {
    border-color: transparent;
    background: transparent;
}

.vp-rfq-rate:read-only {
    border-color: transparent;
    background: transparent;
}

/* A box not offered because of the line itself — the line is Included, or the client's bill gives it no quantity —
   keeps the design's dashed "nothing to type here" box, on every board. */
.vp-rfq-row-inc .vp-rfq-rate,
.vp-rfq-rate.vp-rfq-rate-none {
    border: 1px dashed #d5d0c3;
    background: #f7f5f0;
    color: #6e6b64;
}

/* The column head names the box on the desk; the word in it is the phone card's (below). */
.vp-rfq-rate::placeholder {
    color: transparent;
}

/* INCLUDED, the owner's 30 September column, in the place and the size the design drew its tick: a 16px box centred
   in the cell, the whole cell a label so it is easy to hit. The word beside the box is the phone card's; on the desk
   the column head says it. */
.vp-rfq-row .vp-rfq-c-inc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    cursor: pointer;
}

.vp-rfq-incbox {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #141413;
    cursor: pointer;
}

.vp-rfq-incbox:disabled {
    cursor: default;
}

.vp-rfq-incbox:focus-visible {
    outline: 2px solid var(--app-link);
    outline-offset: 2px;
}

.vp-rfq-inctext {
    display: none;
}

.vp-rfq-c-amount {
    font-variant-numeric: tabular-nums;
}

.vp-rfq-row-inc .vp-rfq-c-amount {
    color: var(--app-muted);
}

/* The row a refused change is about: the design tints it and stains its amount. */
.vp-rfq-row-gap {
    background: #fdf7f5;
}

.vp-rfq-row-gap .vp-rfq-c-amount {
    color: var(--app-danger);
    font-weight: 500;
}

/* A LINE'S NOTE, the owner's 30 September decision. The design draws none, so it is built from the bill's own parts:
   a quiet control under the description, the note itself under it once written, and the box that edits it opening
   under the line, across the description, the numbers and the amount it explains. */
.vp-rfq-notebtn {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 11.5px;
    color: var(--app-link);
    cursor: pointer;
}

.vp-rfq-notebtn:hover {
    text-decoration: underline;
}

.vp-rfq-notebtn:focus-visible {
    outline: 2px solid var(--app-link);
    outline-offset: 2px;
    border-radius: 3px;
}

.vp-rfq-notepreview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--app-muted);
    overflow-wrap: anywhere;
}

.vp-rfq-noterow {
    grid-column: 3 / -1;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 2px 0 8px;
}

.vp-rfq-notearea {
    flex: 1 1 auto;
    min-height: 56px;
    resize: vertical;
}

.vp-rfq-noterow .vp-rfq-btn {
    flex: 0 0 auto;
    height: 32px;
}

.vp-rfq-more {
    display: flex;
    justify-content: center;
    padding: 12px 16px;
}

.vp-rfq-morebtn {
    height: 32px;
    padding: 0 14px;
    border: 1px solid #d5d0c3;
    border-radius: 8px;
    background: var(--app-paper);
    color: var(--app-ink);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.vp-rfq-foot {
    flex-shrink: 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px;
    border-top: 1px solid var(--app-line);
    background: var(--app-sunken);
    font-size: 12px;
    color: var(--app-muted);
}

.vp-rfq-hint {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the sidebar */
/* THE PANEL TAKES THE COLOUR OF WHAT THE COMPANY HOLDS (owner, 30 September 2026; DECISIONS.md item 24): green when it
   holds this vendor's answer, amber while the screen carries changes it does not have, red when the request was
   cancelled, grey when it holds nothing. VendorRfqState.ToneOf picks the class; the colours are the design's own
   green, amber and red notice pairs and its grey chip. The phone's card and bar read the same three values. */
.vp-rfq-side {
    --vp-panel: var(--app-paper);
    --vp-panel-line: var(--app-line);
    --vp-panel-ink: var(--app-ink);
    --vp-panel-track: #eeece6;

    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    /* The foot stays on screen while the column scrolls under it, so whatever is brought into view ("Go to the first
       one", or the focus moving) lands above it, never under it. vendor-rfq.js measures the foot. */
    scroll-padding-block-end: var(--vp-rfq-foot, 0px);
    padding: 16px 0 0;
    background: var(--vp-panel);
    border: 1px solid var(--vp-panel-line);
    border-radius: 12px;
}

.vp-rfq-side-green {
    --vp-panel: #e4efe7;
    --vp-panel-line: #c5dccb;
    --vp-panel-ink: #173f2d;
    --vp-panel-track: #c5dccb;
}

.vp-rfq-side-amber {
    --vp-panel: #f6ebd8;
    --vp-panel-line: #e7d2ac;
    --vp-panel-ink: #4a340a;
    --vp-panel-track: #e7d2ac;
}

.vp-rfq-side-red {
    --vp-panel: #f7e7e4;
    --vp-panel-line: #e6c4bd;
    --vp-panel-ink: #6e231b;
    --vp-panel-track: #e6c4bd;
}

.vp-rfq-side-grey {
    --vp-panel: #eeece6;
    --vp-panel-line: #dad6cb;
    --vp-panel-ink: var(--app-ink);
    --vp-panel-track: #dad6cb;
}

/* THE SIDEBAR'S TWO WRAPPERS DRAW NOTHING ON THE DESK. The details and the bar (VendorRfqSidebar) exist so a phone can
   draw the design's card and bar; here their blocks sit in the one column, in the design's order: the money, what the
   company holds, the details, then the foot. The phone's own parts of the card are not drawn. */
.vp-rfq-details,
.vp-rfq-fields,
.vp-rfq-bar,
.vp-rfq-sum {
    display: contents;
}

.vp-rfq-sum > .vp-rfq-sideblock {
    order: 1;
}

.vp-rfq-status {
    order: 2;
}

.vp-rfq-fields > .vp-rfq-sideblock {
    order: 3;
}

.vp-rfq-acts {
    order: 4;
}

.vp-rfq-details-head,
.vp-rfq-details-sum,
.vp-rfq-details-nq,
.vp-rfq-details-why {
    display: none;
}

.vp-rfq-sideblock {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px;
}

/* The attachments live in the desk's foot (DECISIONS.md item 22); the fields' own block is the phone's. AFTER the
   sideblock's own display, which has the same weight: written above it, the phone's copy showed on the desk as a
   second "Attachments". */
@media (min-width: 701px) {
    .vp-rfq-phoneonly {
        display: none;
    }
}

.vp-rfq-sidelabel {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #3f3d38;
}

/* The design draws the money label as small caps; every other block label is plain. */
.vp-rfq-sum .vp-rfq-sidelabel {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b6862;
}

.vp-rfq-total {
    margin: 0;
    font-family: var(--app-serif);
    font-size: 25px;
    font-weight: 500;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.vp-rfq-track {
    height: 6px;
    border-radius: 3px;
    background: var(--vp-panel-track);
    overflow: hidden;
}

.vp-rfq-fill {
    height: 6px;
    background: var(--app-link);
}

.vp-rfq-progress {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #4d4b46;
}

.vp-rfq-currency {
    margin: 0;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--app-line);
    border-radius: 8px;
    background: var(--app-sunken);
    font-size: 13px;
    line-height: 32px;
    color: var(--app-ink);
    box-sizing: border-box;
}

.vp-rfq-note {
    margin: 0;
    font-size: 12px;
    color: var(--app-muted);
}

.vp-rfq-validrow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vp-rfq-input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d5d0c3;
    border-radius: 8px;
    background: var(--app-paper);
    font-family: inherit;
    font-size: 13px;
    color: var(--app-ink);
    box-sizing: border-box;
}

.vp-rfq-valid {
    width: 72px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.vp-rfq-input:disabled {
    border-color: var(--app-line);
    background: var(--app-sunken);
}

.vp-rfq-input[aria-invalid="true"] {
    border: 1px solid var(--app-danger);
    box-shadow: 0 0 0 1px var(--app-danger);
    background: var(--app-paper);
}

.vp-rfq-days {
    font-size: 13px;
}

.vp-rfq-until {
    font-size: 12px;
    color: var(--app-muted);
}

.vp-rfq-area {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d5d0c3;
    border-radius: 8px;
    background: var(--app-paper);
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--app-ink);
    resize: none;
    box-sizing: border-box;
}

.vp-rfq-area:disabled {
    border-color: var(--app-line);
    background: var(--app-sunken);
}

.vp-rfq-error {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--app-danger);
}

/* ---------------------------------------------------------------- the foot: attachments, when saved, the buttons */
/* The sidebar scrolls as one column and its foot stays at the bottom of the window's sidebar, which is the design's
   own arrangement — reached here with position: sticky rather than a second wrapper element, and pushed to the
   bottom by margin-top when the column is shorter than the sidebar. The owner moved the attachments into the foot so
   they are on screen with "Submit quote" (DECISIONS.md item 22). */
.vp-rfq-acts {
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--vp-panel-line);
    background: var(--vp-panel);
}

.vp-rfq-attach {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 30px;
}

/* THE VENDOR'S OWN FILES: the design's attachment rows - name and size, 8px 10px, a hairline, 8px corners - and its
   "+ Add a file". The picker sits inside the button's label, so the label is what is pressed. */
.vp-rfq-files {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vp-rfq-filelist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vp-rfq-fileitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e3dfd4;
    border-radius: 8px;
    font-size: 12.5px;
}

.vp-rfq-filename {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--app-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vp-rfq-filesize {
    flex-shrink: 0;
    font-size: 12px;
    color: #63615b;
}

.vp-rfq-fileremove {
    display: contents;
}

.vp-rfq-fileremovebtn {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #8c2e24;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.vp-rfq-fileadd {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vp-rfq-fileadd .vp-rfq-attachbtn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
}

.vp-rfq-filesend {
    height: 30px;
    padding: 0 12px;
    border: 1px solid #d5d0c3;
    border-radius: 7px;
    background: var(--app-paper);
    font-family: inherit;
    font-size: 12px;
}

.vp-rfq-fileremovebtn:focus-visible,
.vp-rfq-filename:focus-visible,
.vp-rfq-fileadd .vp-rfq-attachbtn:focus-within {
    outline: 2px solid #2f5d50;
    outline-offset: 2px;
}

/* The design's "+ Add a file": 30px, dashed, 12px. Greyed the way every greyed button on this screen is. */
.vp-rfq-attachbtn {
    height: 30px;
    padding: 0 12px;
    border: 1px dashed #d5d0c3;
    border-radius: 7px;
    background: var(--app-paper);
    color: var(--app-ink);
    font-family: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.vp-rfq-attachbtn:disabled {
    border-color: #cfcabd;
    background: transparent;
    color: #6e6b64;
    cursor: not-allowed;
}

.vp-rfq-saved {
    flex: 1 1 100%;
    margin: 0;
    font-size: 12px;
    color: var(--app-muted);
}

.vp-rfq-why {
    flex: 1 1 100%;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--app-muted);
}

.vp-rfq-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.vp-rfq-btn-pri {
    border: 0;
    background: #141413;
    color: #faf9f5;
}

.vp-rfq-btn-sec {
    border: 1px solid #d5d0c3;
    background: var(--app-paper);
    color: var(--app-ink);
}

.vp-rfq-btn-danger {
    border: 1px solid #dfbbb5;
    background: var(--app-paper);
    color: var(--app-danger);
}

.vp-rfq-btn-send {
    border: 0;
    background: var(--app-danger);
    color: #fff;
}

.vp-rfq-btn-off,
.vp-rfq-btn:disabled {
    border: 1px dashed #cfcabd;
    background: transparent;
    color: #6e6b64;
    cursor: not-allowed;
}

.vp-rfq-btn-full {
    flex: 1 1 100%;
    height: 40px;
}

/* ---------------------------------------------------------------- what the company holds, in the panel */
/* The notice under the money: the panel's colour says it, these two lines explain it (DECISIONS.md item 24). */
.vp-rfq-status {
    margin: 0 16px;
    padding-top: 12px;
    border-top: 1px solid var(--vp-panel-line);
    color: var(--vp-panel-ink);
}

.vp-rfq-status-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.vp-rfq-status-body {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
}

/* 1d, in the foot above "Submit quote": what stopped the change, in the design's red notice pair. */
.vp-rfq-blocked {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #e6c4bd;
    border-radius: 8px;
    background: #f7e7e4;
    color: #6e231b;
}

.vp-rfq-blocked-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.vp-rfq-blocked-body {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
}

.vp-rfq-blocked .vp-rfq-btn {
    flex: 0 0 auto;
    height: 32px;
}

/* ---------------------------------------------------------------- the card that replaces the page */
.vp-rfq-msg {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

/* ONE card holds the coloured bar and the words, as the design draws it: the bar sits inside the card's border and
   its rounded corners, and the card is centred on the page. */
.vp-rfq-msg-card {
    max-width: 540px;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--app-paper);
    border: 1px solid var(--app-line);
    border-radius: 12px;
}

.vp-rfq-msg-bar {
    height: 4px;
    background: var(--app-muted);
}

.vp-rfq-msg-bar-red {
    background: var(--app-danger);
}

.vp-rfq-msg-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px 32px;
}

.vp-rfq-msg-title {
    margin: 0;
    font-family: var(--app-serif);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

.vp-rfq-msg-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #3f3d38;
}

.vp-rfq-msg-acts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.vp-rfq-msg-acts .vp-rfq-btn {
    flex: 0 0 auto;
}

.vp-rfq-kicker {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #4d4b46;
}

.vp-rfq-msg-bar-red + .vp-rfq-msg-body .vp-rfq-kicker {
    color: var(--app-danger);
}

/* The login is an email, often one long word: on a phone it breaks inside the address rather than running past the
   card's edge, where the card would cut it off. */
.vp-rfq-signed {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.vp-rfq-skel {
    height: 14px;
    width: 70%;
    border-radius: 6px;
    background: #e8e5dd;
}

.vp-rfq-skel-lines {
    height: 96px;
    width: 100%;
    border-radius: 10px;
    background: var(--app-paper);
    border: 1px solid var(--app-line);
}

/* ---------------------------------------------------------------- 1e, the refusal, docked inline-end */
/* The design docks the panel under the top bar, the full height of what is left of the window, with the page behind
   it dimmed. The page scrolls under a bar that does not stay, so vendor-rfq.js measures where the page's content
   starts on the screen at the moment it opens the panel and hands it over as --vp-rfq-top. */
.vp-rfq-panel[open] {
    position: fixed;
    inset-block: var(--vp-rfq-top, 52px) 0;
    inset-inline: auto 0;
    margin: 0;
    padding: 0;
    width: 452px;
    max-width: 100%;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    border: 0;
    border-inline-start: 1px solid var(--app-line);
    background: var(--app-paper);
    color: var(--app-ink);
    box-shadow: 0 0 44px rgba(20, 20, 19, 0.14);
    overflow: hidden;
    box-sizing: border-box;
}

.vp-rfq-panel-bar {
    flex-shrink: 0;
    height: 4px;
    background: var(--app-danger);
}

.vp-rfq-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px 18px;
    border-bottom: 1px solid #eeebe2;
}

.vp-rfq-panel-title {
    margin: 6px 0 0;
    font-family: var(--app-serif);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
}

.vp-rfq-panel-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px solid var(--app-line);
    border-radius: 8px;
    background: var(--app-paper);
    color: var(--app-muted);
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.vp-rfq-panel-body {
    flex-grow: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 28px;
}

.vp-rfq-panel-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #3f3d38;
}

.vp-rfq-legend {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vp-rfq-legend-label {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #3f3d38;
}

.vp-rfq-reason {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--app-line);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    box-sizing: border-box;
}

.vp-rfq-reason:has(input:checked) {
    border-color: #141413;
    background: var(--app-sunken);
}

.vp-rfq-reason input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #141413;
}

.vp-rfq-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vp-rfq-panel-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 28px 24px;
    border-top: 1px solid #eeebe2;
}

.vp-rfq-panel-aside {
    flex: 1 1 auto;
    max-width: 170px;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--app-muted);
}

.vp-rfq-panel-foot .vp-rfq-btn {
    flex: 0 0 auto;
    height: 38px;
}

/* ---------------------------------------------------------------- the question a submit asks */
/* The owner's 30 September decision; the design draws no such question, so it is built from the page's own
   parts: the card of the page's messages, the serif of its titles and the amber of its warnings, centred over the
   page it is about. */
.vp-rfq-confirm[open] {
    margin: auto;
    padding: 0;
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--app-line);
    border-radius: 12px;
    background: var(--app-paper);
    color: var(--app-ink);
    box-shadow: 0 12px 44px rgba(20, 20, 19, 0.18);
    overflow: hidden;
    box-sizing: border-box;
}

.vp-rfq-confirm-bar {
    flex-shrink: 0;
    height: 4px;
    background: #141413;
}

.vp-rfq-confirm-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 28px 18px;
}

.vp-rfq-confirm-title {
    margin: 0;
    font-family: var(--app-serif);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
}

.vp-rfq-confirm-say {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vp-rfq-confirm-total {
    margin: 0;
    font-family: var(--app-serif);
    font-size: 25px;
    font-weight: 500;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.vp-rfq-confirm-line {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #3f3d38;
}

.vp-rfq-confirm-warn {
    padding: 8px 10px;
    border: 1px solid #e7d2ac;
    border-radius: 8px;
    background: #f6ebd8;
    color: #4a340a;
}

.vp-rfq-confirm-aside {
    font-size: 12px;
    color: var(--app-muted);
}

.vp-rfq-confirm-foot {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px 22px;
    border-top: 1px solid #eeebe2;
}

.vp-rfq-confirm-foot .vp-rfq-btn {
    flex: 0 0 auto;
    height: 38px;
}