/* SeaPay® online banking — round 0210 phase 2: the Approvals inbox and an order's approval (js/8j-prov-web.js). The One SeaPay tokens of
   bank.css and the budget's parts (budget.css): cards radius 20 with a hairline, IvyMode for the figures, the check strip in its level's
   colour, the allergen badge outlined in red (as the Mac and the Controller), one primary button for the decision. Small secondary text is
   --sp-muted, never --sp-label: at 11–12 px Night needs it to read at 4.5:1 or more (design P2 17). */

/* ── the inbox ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.pv-kinds { margin-bottom: 14px; }
.pv-kinds a.pill { text-decoration: none; }
.pv-list .row { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 0.55fr) 130px 18px; }
.pv-list a.row { text-decoration: none; color: inherit; }
/* the check's chip on its own line, then the purpose, the supplier and who asked — the same shape for every kind */
.pv-list .row .t2 { white-space: normal; flex-direction: column; align-items: flex-start; gap: 3px; }
.pv-list .row .t2 .chip { height: 18px; padding: 0 8px; font-size: 10px; }
.pv-list .row .t2 .tp-sub { white-space: normal; display: inline; }
.pv-list .row .t3.pv-rule { margin-top: 3px; font-size: 11px; color: var(--sp-muted); }
.pv-list .row .st.pending { background: var(--sp-rose-soft); color: var(--sp-rose); }
.pv-wait { margin: 10px 0 0; }
@media (max-width: 860px) {
  .pv-list .row { grid-template-columns: 26px minmax(0, 1fr) auto 14px; }
  .pv-list .row .t1 { white-space: normal; }
  /* on a phone a row's chip (its check, or "Asked by you · waiting for the manager") wraps rather than losing its end */
  .pv-list .row .t2 .chip { height: auto; min-height: 18px; padding: 2px 8px; border-radius: 9px; white-space: normal; line-height: 1.35; max-width: 100%; }
}

/* ── a move between lines (the sheet) ───────────────────────────────────────────────────────────────────────────── */
.pv-move { display: grid; gap: 4px; margin-bottom: 14px; }
.pv-move-a { font-size: 34px; line-height: 1.05; color: var(--sp-ink); }
.pv-move b { font-size: 13.5px; color: var(--sp-ink); font-weight: 600; }
.pv-mlines { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.pv-mline { display: grid; gap: 3px; align-content: start; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--sp-line); background: var(--sp-card); min-width: 0; }
.pv-mline b { font-size: 13px; color: var(--sp-ink); font-weight: 600; }
.pv-mline .muted { font-size: 11.5px; }
.pv-mline .kv { grid-template-columns: minmax(64px, 34%) minmax(0, 1fr); font-size: 12px; padding: 6px 0; }
/* in the sheet (narrow on every screen) the two lines stand one above the other */
.sheet .pv-mlines { grid-template-columns: 1fr; }

/* ── an order: its lines on the left, the decision on the right ──────────────────────────────────────────────────── */
.pv-order { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr); gap: 16px; align-items: start; }
.pv-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: sticky; top: 12px; }
.pv-side > .card + .card { margin-top: 0; }
/* one column (a phone, a narrow window): the budget check and the decision first, as on the iPhone, then the lines, then the rest (design P2 F) */
@media (max-width: 1100px) { .pv-order { grid-template-columns: minmax(0, 1fr); } .pv-side { display: contents; } .pv-side > .pv-dec { order: -1; } }
.pv-lcard .card-h { align-items: baseline; }
.pv-lang { font-size: 11.5px; }
.pv-for { margin-bottom: 8px; }
.pv-lines { display: flex; flex-direction: column; margin-top: 6px; }
.pv-lr { display: grid; grid-template-columns: minmax(0, 1fr) 180px 104px 74px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--sp-line2); font-size: 13px; }
.pv-lr.pv-lh { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-label); border-top: 0; padding-top: 2px; }
.pv-lr .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-lt { display: grid; gap: 2px; min-width: 0; }
.pv-lt b { font-weight: 600; color: var(--sp-ink); overflow-wrap: anywhere; }
.pv-lt .muted { font-size: 11.5px; color: var(--sp-muted); }
.pv-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.pv-allergen { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sp-bad); background: transparent; border: 1px solid var(--sp-bad); }
.pv-tag { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 5px; font-size: 10px; font-weight: 600; color: var(--sp-dim); background: var(--sp-chip); }
.pv-tag.warn { color: var(--sp-warn); background: var(--sp-warn-soft); }
/* a guest whose preference sheet names the line's allergen (the order's `allergens`, §9.9) */
.pv-tag.bad { color: var(--sp-bad); background: var(--sp-bad-soft); }
.pv-tag.mono { font-family: var(--mono); font-weight: 500; }
.pv-qty { display: inline-flex; align-items: center; gap: 2px; justify-self: start; }
.pv-qty .ibtn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--sp-line); font-size: 15px; color: var(--sp-ink); }
.pv-qin { width: 56px; height: 28px; border-radius: 8px; border: 1px solid var(--sp-line); background: var(--sp-field); color: var(--sp-ink); text-align: center; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
.pv-qin:focus { outline: none; border-color: var(--sp-rose-line); }
.pv-unit { min-width: 54px; padding: 0 4px; font-size: 11.5px; color: var(--sp-muted); }
.pv-qty.ro { color: var(--sp-dim); white-space: nowrap; }
.pv-lv { color: var(--sp-ink); }
.pv-out { background: none; border: 0; padding: 0; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--sp-rose); text-align: right; justify-self: end; }
.pv-lr.out .pv-lt b, .pv-lr.out .pv-lv { color: var(--sp-muted); text-decoration: line-through; }
.pv-lr.out .pv-lv { text-decoration: none; font-style: italic; }
.pv-lr.changed { background: linear-gradient(90deg, var(--sp-rose-soft), transparent 70%); }
.pv-lr.changed .pv-lv { color: var(--sp-rose); font-weight: 600; }
.pv-more { display: grid; gap: 2px; justify-items: start; padding: 11px 0; border: 0; border-top: 1px solid var(--sp-line2); background: none; color: var(--sp-text); text-align: left; cursor: pointer; font: inherit; font-size: 13px; }
.pv-more .lnk { font-size: 12px; font-weight: 600; color: var(--sp-rose); }
.pv-ltr { font-size: 14px; }
.pv-ltr .pv-lt b { font-weight: 700; }
.pv-ltot { font-family: var(--font-display); font-size: 19px; color: var(--sp-ink); }
@media (max-width: 860px) {
  .pv-lr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .pv-lr.pv-lh { display: none; }
  .pv-lr > .pv-lt { grid-column: 1 / -1; }
  .pv-lr > .pv-out { grid-column: 2; }
  .pv-lr.pv-ltr > .pv-lt, .pv-lr.pv-fee > .pv-lt { grid-column: 1; }
  /* a finger's target on a phone (design P2 18): the steppers and the quantity 44 px */
  .pv-qty .ibtn { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
  .pv-qin { width: 60px; height: 44px; border-radius: 12px; font-size: 15px; }
  .pv-out { min-height: 44px; }
}

/* the decision: the total, the check strip, the single choice, the actions */
.pv-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pv-total .serif { font-size: 34px; line-height: 1.05; color: var(--sp-ink); }
.pv-total .muted { font-size: 12px; }
.pv-strip { display: grid; gap: 3px; padding: 11px 14px; border-radius: 14px; font-size: 12px; color: var(--sp-dim); background: var(--sp-chip); }
.pv-strip b { font-size: 13px; font-weight: 600; color: var(--sp-ink); }
.pv-strip.ok { background: var(--sp-ok-soft); } .pv-strip.ok b { color: var(--sp-ok); }
.pv-strip.warn { background: var(--sp-warn-soft); } .pv-strip.warn b { color: var(--sp-warn); }
.pv-strip.bad { background: var(--sp-bad-soft); } .pv-strip.bad b { color: var(--sp-bad); }
.pv-strip .muted { font-size: 11px; }
.pv-rule2 { display: flex; gap: 6px; align-items: center; margin: 10px 0 0; color: var(--sp-muted); }
.pv-rule2 svg { flex: none; color: var(--sp-muted); }
.pv-dec .note { margin-top: 12px; }
.pv-choice { display: grid; gap: 8px; margin-top: 14px; }
.pv-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--sp-line); background: var(--sp-field); cursor: pointer; }
.pv-opt input { margin: 2px 0 0; accent-color: var(--sp-rose); width: 16px; height: 16px; }
.pv-opt.on { border-color: var(--sp-rose-line); background: var(--sp-sel); }
.pv-opt.off { opacity: 0.55; cursor: default; }
.pv-opt-t { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.pv-opt-t b { font-size: 13px; font-weight: 600; color: var(--sp-ink); }
.pv-opt-t .muted { font-size: 11.5px; line-height: 1.45; }
.pv-from { margin-top: 6px; height: 32px; width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; padding: 0 28px 0 10px; border-radius: 10px; border: 1px solid var(--sp-line); background: var(--sp-field); color: var(--sp-ink); font: inherit; font-size: 12.5px; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 14px) 14px, calc(100% - 10px) 14px; background-size: 4px 4px; background-repeat: no-repeat; }
.pv-dec .field { margin-top: 12px; }
.pv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 560px) { .pv-acts { display: grid; grid-template-columns: 1fr 1fr; } .pv-acts > .btn:first-child { grid-column: 1 / -1; } }
.pv-lang-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pv-check { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sp-line); font-size: 13px; cursor: pointer; }
.pv-check input { accent-color: var(--sp-rose); width: 16px; height: 16px; margin: 0; }

/* what happened */
.pv-evs { display: grid; gap: 0; }
.pv-ev { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--sp-line2); font-size: 12.5px; color: var(--sp-dim); }
.pv-ev:first-child { border-top: 0; }
.pv-ev b { color: var(--sp-ink); font-weight: 600; }
.pv-ev-d { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--sp-rose); }
.pv-ev-t { display: block; font-size: 11px; }

/* a parts order's landed cost (§9.14) and a check that moved since the page was read */
.pv-landed .card-h { align-items: center; }
.pv-landed .bd-small { margin-bottom: 6px; }
.pv-moved { margin-bottom: 16px; }

/* the budget's screens: an order named on a line's money */
.bd-mt a.bd-mlink { font-weight: 600; color: var(--sp-ink); text-decoration: underline; text-decoration-color: var(--sp-rose-line); text-underline-offset: 3px; }