/* Qiv's shipped "Harbor" look (PrototypeLooks.swift): slate and emerald on cool ledger paper, New York for
   money and paper titles. Screens are laid out at their device's own size and mapped onto the glass. */
.qv, .qair {
  --q-text: #171a1c; --q-muted: #666f73; --q-faint: #949a9d; --q-line: #d7dbda;
  --q-slate: #20252a; --q-mid: #424d54; --q-deep: #0e1114; --q-em: #258566; --q-em2: #6bb894; --q-owing: #c74a42; --q-paid: #1f734d;
  --q-bg: #f5f6f5; --q-canvas: #e7ebe9; --q-surface: #fefefe;
  --q-serif: var(--serif);
  font-family: var(--sf); color: var(--q-text); -webkit-font-smoothing: antialiased;
}
.qv { background: var(--q-bg); }
.qv .mp { overflow: hidden; }
.qv svg, .qair svg { display: block; }
.sg { width: 100%; height: 100%; }
.qv .num, .qv b, .qv em { font-variant-numeric: tabular-nums; }

/* the pale mesh behind every Harbor screen */
.qmesh {
  background:
    radial-gradient(120% 70% at 0% 0%, #e0eee8 0%, rgba(224, 238, 232, 0) 55%),
    radial-gradient(90% 60% at 100% 22%, #eef4f1 0%, rgba(238, 244, 241, 0) 60%),
    radial-gradient(90% 55% at 55% 100%, #e3ece8 0%, rgba(227, 236, 232, 0) 70%), var(--q-bg);
}

/* ——— status bar ——— */
.qsb { color: var(--q-text); font-weight: 600; }
.qsb .sb-t { position: absolute; left: 34px; top: 17px; font-size: 16px; letter-spacing: -0.01em; }
.qsb .sb-ic { position: absolute; right: 30px; top: 20px; display: flex; align-items: flex-end; gap: 1.6px; height: 12px; }
.qsb .sb-ic > i { width: 3px; border-radius: 1px; background: currentColor; }
.qsb .sb-ic > i:nth-child(1) { height: 4px; } .qsb .sb-ic > i:nth-child(2) { height: 6.5px; } .qsb .sb-ic > i:nth-child(3) { height: 9px; } .qsb .sb-ic > i:nth-child(4) { height: 11.5px; }
.qsb .sb-wifi { width: 17px; height: 13px; margin: 0 4px 0 5px; stroke-width: 2.6; }
.qsb .sb-batt { width: 25px; height: 12px; border-radius: 3.6px; box-shadow: inset 0 0 0 1.2px currentColor; position: relative; opacity: 0.95; }
.qsb .sb-batt::after { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 17px; border-radius: 1.6px; background: currentColor; }
.qsb.dark { color: #fff; }

/* ——— header bits ——— */
.qbrand { object-fit: cover; box-shadow: 0 0 0 1px rgba(32, 37, 42, 0.08); }
.qtitle { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap; }
.qtitle-serif { font-family: var(--q-serif); font-size: 29px; font-weight: 600; letter-spacing: -0.01em; }
.qsub { font-size: 12.5px; color: var(--q-muted); white-space: nowrap; }
.qcirc { display: grid; place-items: center; background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.08); color: var(--q-slate); }
.qcirc .sg { width: 19px; height: 19px; }
.qback { display: flex; align-items: center; gap: 2px; font-size: 17px; color: var(--q-em); white-space: nowrap; }
.qback .sg { width: 21px; height: 21px; }
.qnavt { font-size: 17px; font-weight: 650; white-space: nowrap; text-align: center; }
.qlink { font-size: 17px; color: var(--q-em); white-space: nowrap; }
.qlink b { font-weight: 650; }
.qdots { background: rgba(32, 37, 42, 0.07); }
.qdots i { position: absolute; top: 3.5px; width: 5px; height: 5px; border-radius: 50%; background: rgba(32, 37, 42, 0.22); }
.qdots i:nth-child(1) { left: 7px; } .qdots i:nth-child(2) { left: 17px; } .qdots i:nth-child(3) { left: 27px; } .qdots i:nth-child(4) { left: 37px; }
.qdots b { position: absolute; top: 3.5px; left: calc(5px + var(--act, 0) * 10px); width: 9px; height: 5px; border-radius: 3px; background: var(--q-em); }

/* ——— the dark hero card ——— */
.qhero { background: linear-gradient(150deg, #0e1114 0%, #122421 52%, #235a4b 100%); color: #fff; }
.qhero > * { position: absolute; }
.qh-eye { left: 20px; top: 20px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--q-em2); white-space: nowrap; }
.qh-per { left: 20px; top: 37px; font-size: 12px; color: rgba(255, 255, 255, 0.62); white-space: nowrap; }
.qh-amt { left: 18px; top: 54px; font-family: var(--q-serif); font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qh-amt .qh-c { font-size: 0.52em; vertical-align: 0.74em; margin-left: 1px; }
.qh-tog { right: 16px; top: 18px; display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 11px; background: rgba(255, 255, 255, 0.08); }
.qh-tog i { font-style: normal; padding: 5px 8px; border-radius: 7px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.55); }
.qh-tog i.on { background: rgba(107, 184, 148, 0.24); color: #fff; }
.qh-tick { left: 20px; top: 114px; width: 28px; height: 3px; border-radius: 2px; background: var(--q-em2); }
.qh-bar { left: 20px; right: 20px; top: 130px; height: 7px; display: flex; gap: 3px; }
.qh-bar i { border-radius: 4px; }
.qh-bar i:nth-child(1) { width: 58%; background: var(--q-em2); } .qh-bar i:nth-child(2) { width: 18%; background: rgba(255, 255, 255, 0.38); } .qh-bar i:nth-child(3) { flex: 1; background: rgba(255, 255, 255, 0.16); }
.qhero[data-mode="owing"] .qh-bar i:nth-child(1) { width: var(--b1, 62%); background: #e87a72; } .qhero[data-mode="owing"] .qh-bar i:nth-child(2) { width: var(--b2, 12%); background: #e8b25c; } .qhero[data-mode="owing"] .qh-bar i:nth-child(3) { background: var(--q-em2); }
.qh-leg { left: 20px; top: 145px; display: flex; gap: 12px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); }
.qh-leg i { font-style: normal; display: flex; align-items: center; gap: 5px; }
.qh-leg i::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.qh-leg i:nth-child(1)::before { background: var(--q-em2); }
.qhero[data-mode="owing"] .qh-leg i:nth-child(1)::before { background: #e87a72; } .qhero[data-mode="owing"] .qh-leg i:nth-child(2)::before { background: #e8b25c; } .qhero[data-mode="owing"] .qh-leg i:nth-child(3)::before { background: var(--q-em2); }
.qh-spark { left: 20px; right: 20px; top: 166px; height: 62px; }
.qh-spark small { display: block; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.5); }
.qh-spark .spk { width: 100%; height: 36px; margin-top: 4px; }
.spk-l { fill: none; stroke: var(--q-em2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spk-a { fill: rgba(107, 184, 148, 0.14); stroke: none; }
.qh-w { display: flex; justify-content: space-between; margin-top: 3px; font-size: 8px; color: rgba(255, 255, 255, 0.42); }
.qh-w i { font-style: normal; }

/* ——— the status rail over the list ——— */
.qrail .qrl-seg { position: absolute; left: 0; top: 0; bottom: 0; right: 54px; display: flex; border-radius: 22px; background: rgba(32, 37, 42, 0.06); }
.qrl-th { position: absolute; top: 4px; bottom: 4px; left: calc(4px + var(--sel, 0) * (100% - 8px) / 3); width: calc((100% - 8px) / 3); border-radius: 18px; background: var(--q-em); }
.qrl-seg b { position: relative; flex: 1; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--q-muted); }
.qrl-seg b.on { color: #fff; }
.qrl-s { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; }

/* ——— the list card ——— */
.qcard-box { background: #fff; box-shadow: inset 0 0 0 2.25px rgba(32, 37, 42, 0.1); }
.qc { position: absolute; left: 0; top: 0; width: 361px; height: 164px; }
.qc > * { position: absolute; }
.qc-av { left: 16px; top: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #4b565d, #20252a); color: #fff; font-size: 17px; font-weight: 700; }
.qc-name { left: 70px; top: 19px; font-size: 16px; font-weight: 700; white-space: nowrap; }
.qc-no { left: 70px; top: 41px; font-size: 12px; color: var(--q-muted); white-space: nowrap; }
.qc-chip { right: 16px; top: 16px; padding: 4px 9px; border-radius: 9px; font-size: 11px; font-weight: 650; color: #5c6468; background: #eceeed; white-space: nowrap; }
.qc[data-s="quoted"] .qc-chip { color: var(--q-em); background: rgba(37, 133, 102, 0.12); }
.qc[data-s="unpaid"] .qc-chip { color: var(--q-owing); background: rgba(199, 74, 66, 0.1); }
.qc[data-s="partial"] .qc-chip { color: #a8741f; background: rgba(232, 178, 92, 0.18); }
.qc[data-s="paid"] .qc-chip { color: var(--q-paid); background: rgba(31, 115, 77, 0.14); }
.qc-amt { right: 16px; top: 40px; font-style: normal; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qc-pills { left: 16px; top: 74px; display: flex; gap: 6px; }
.qc-pills i { font-style: normal; padding: 5px 11px; border-radius: 12px; font-size: 11px; font-weight: 600; color: var(--q-mid); background: #eef1ef; white-space: nowrap; }
.qc-pills .qc-p1 { color: var(--q-em); background: rgba(37, 133, 102, 0.1); }
.qc-when { right: 16px; top: 79px; font-size: 10.5px; color: var(--q-muted); white-space: nowrap; }
.qc-when b { color: var(--q-text); font-weight: 650; }
.qc-slide { left: 16px; right: 16px; top: 112px; height: 40px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #3b3f44, #2b3034); }
.qc.collect .qc-slide { background: linear-gradient(180deg, #23926a, #1f734d); }
.qc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--kn, 0) * 100%); background: rgba(255, 255, 255, 0.16); }
.qc-lab { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 28px; font-size: 13px; font-weight: 650; color: #fff; white-space: nowrap; opacity: calc(1 - var(--kn, 0) * 1.4); }
.qc-knob { position: absolute; top: 4px; left: calc(4px + var(--kn, 0) * (100% - 40px)); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--q-slate); }
.qc-knob .sg { width: 16px; height: 16px; }
.qc.collect .qc-knob { color: var(--q-paid); }
.qc-stamp {
  left: 140px; top: 60px; padding: 2px 12px; border: 2.5px solid var(--q-paid); border-radius: 6px; color: var(--q-paid); font-style: normal;
  font-family: var(--sf); font-size: 21px; font-weight: 850; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: var(--stamp, 0); transform: rotate(-14deg) scale(calc(1.9 - var(--stamp, 0) * 0.9)); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(31, 115, 77, 0.5);
}
.qc.short { height: 106px; }
.qc.short .qc-slide, .qc.short .qc-stamp { display: none; }
/* a progress line for a partly paid invoice */
.qc-prog { position: absolute; left: 16px; right: 16px; top: 104px; height: 3px; border-radius: 2px; background: rgba(31, 115, 77, 0.14); opacity: var(--prog-on, 0); }
.qc-prog::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--prog, 0) * 100%); border-radius: 2px; background: var(--q-paid); }

/* ——— buttons ——— */
.qbtn { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 650; white-space: nowrap; transform: scale(calc(1 - var(--down, 0) * 0.04)); }
.qbtn .sg { width: 17px; height: 17px; flex: none; }
.qbtn-dark { background: linear-gradient(180deg, #3b3f44, #2a2f33); color: #fff; box-shadow: inset 0 0 0 100px rgba(0, 0, 0, calc(var(--down, 0) * 0.2)); }
.qbtn-line { background: #fff; color: var(--q-slate); box-shadow: inset 0 0 0 1.5px rgba(32, 37, 42, 0.16), inset 0 0 0 100px rgba(0, 0, 0, calc(var(--down, 0) * 0.06)); }
.qbtn-line.done { color: var(--q-em); box-shadow: inset 0 0 0 1.5px rgba(37, 133, 102, 0.45); background: #eef7f2; }
.qbtn-em { background: linear-gradient(180deg, #2a9a75, #258566); color: #fff; box-shadow: inset 0 0 0 100px rgba(0, 0, 0, calc(var(--down, 0) * 0.16)); }

/* the slide-to control (convert / collect) */
.qslider { background: linear-gradient(180deg, #3b3f44, #2b3034); }
.qslider.em { background: linear-gradient(180deg, #23926a, #1f734d); }
.qs-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--kn, 0) * 100%); background: rgba(255, 255, 255, 0.16); }
.qs-lab { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 40px; color: #fff; font-size: 14px; font-weight: 650; white-space: nowrap; opacity: calc(1 - var(--kn, 0) * 1.5); }
.qs-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 650; white-space: nowrap; opacity: var(--done, 0); }
.qs-done .sg { width: 16px; height: 16px; }
.qs-knob { position: absolute; top: 4px; left: calc(4px + var(--kn, 0) * (100% - 54px)); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--q-slate); opacity: calc(1 - var(--done, 0)); }
.qs-knob .sg { width: 22px; height: 22px; }

/* ——— the tab dock: a glass capsule with a sliding lens ——— */
.qdock { background: rgba(255, 255, 255, 0.84); box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.07), 0 8px 22px rgba(0, 0, 0, 0.09); }
.qlens { background: rgba(37, 133, 102, 0.14); }
.qtab { color: color-mix(in srgb, var(--q-em) calc(var(--on, 0) * 100%), #6b7276); }
.qt-ic { position: absolute; left: 50%; top: 9px; width: 22px; height: 22px; margin-left: -11px; opacity: clamp(0, calc(1 - var(--dot, 0) * 3), 1); }
.qtab b { position: absolute; left: 0; right: 0; top: 36px; text-align: center; font-size: 10px; font-weight: 600; opacity: clamp(0, calc(1 - var(--dot, 0) * 3), 1); }
.qt-dot { position: absolute; inset: 0; border-radius: 50%; background: #b6bebb; opacity: clamp(0, calc((var(--dot, 0) - 0.45) * 2.5), 1); }

/* ——— sheets and forms (iOS) ——— */
.qsheet { background: #f2f2f7; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.14); }
.qsheet-w { background: #fff; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.14); }
.qgrab { position: absolute; left: 50%; top: 6px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(60, 60, 67, 0.3); }
.qnav-l, .qnav-r { position: absolute; top: 20px; font-size: 17px; color: var(--q-em); white-space: nowrap; }
.qnav-l { left: 18px; } .qnav-r { right: 18px; font-weight: 650; }
.qnav-t { position: absolute; left: 0; right: 0; top: 20px; text-align: center; font-size: 17px; font-weight: 650; white-space: nowrap; }
.qform { background: #fff; border-radius: 12px; }
.qrow { position: absolute; left: 0; right: 0; height: 44px; display: flex; align-items: center; padding: 0 16px; font-size: 16px; white-space: nowrap; }
.qrow + .qrow::before, .qrow.sep::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 0.6px; background: rgba(60, 60, 67, 0.2); }
.qrow .v { margin-left: auto; color: #8a8a8e; font-variant-numeric: tabular-nums; }
.qrow .v.ink { color: var(--q-text); font-weight: 600; }
.qrow .v.em { color: var(--q-em); }
.qsec { position: absolute; left: 34px; font-size: 12.5px; color: #6d6d72; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; }
.qfoot { position: absolute; left: 34px; right: 34px; font-size: 12.5px; line-height: 1.35; color: #6d6d72; }

/* toggle */
.qtog { position: relative; width: 51px; height: 31px; border-radius: 16px; background: color-mix(in srgb, #34c759 calc(var(--on, 0) * 100%), #e9e9eb); flex: none; }
.qtog::after { content: ""; position: absolute; top: 2px; left: calc(2px + var(--on, 0) * 20px); width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
/* stepper */
.qstep { display: flex; width: 94px; height: 32px; border-radius: 9px; background: #eeeef0; flex: none; }
.qstep i { flex: 1; display: grid; place-items: center; color: #1c1c1e; font-style: normal; font-size: 20px; font-weight: 400; }
.qstep i + i { box-shadow: inset 0.6px 0 0 rgba(60, 60, 67, 0.24); }
.qstep i.down { background: rgba(0, 0, 0, 0.08); }
/* chips */
.qchip { display: inline-grid; place-items: center; height: 30px; padding: 0 14px; border-radius: 15px; font-size: 14px; font-weight: 600; color: var(--q-mid); background: #eef1ef; white-space: nowrap; }
.qchip.on { color: #fff; background: var(--q-em); }

/* ——— the paper: 400 × 518, six looks ——— */
.pp {
  --paper: #fcfbf9; --band: transparent; --bandH: 0px; --bandAcc: #258566; --onBand: #f5f7f6; --acc: #258566; --accInk: #1a614d; --mist: #f5f6f5;
  --ink: #171a1c; --muted: #666f73; --faint: #949a9d; --title: #20252a; --tfont: var(--serif); --tw: 600; --tsize: 17.6px; --track: 2.9px;
  --bar: 1px; --sh: 0px; --tick: 1; --rail: 0;
  position: absolute; left: 0; top: 0; width: 400px; height: 518px; overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--sf);
}
.pp > * { position: absolute; }
.pp[data-look="inkBand"] { --paper: #fefefe; --band: #20252a; --bandH: 49.7px; --bandAcc: #258566; --onBand: #f5f7f6; --tsize: 15.7px; --track: 1.7px; --tick: 0; --sh: 36px; --bar: 1.2px; }
.pp[data-look="harborSerif"] { --paper: #fdfcfb; --acc: #1f7a61; --accInk: #145747; --mist: #f3f5f3; --ink: #121417; --muted: #61696e; --faint: #8f9496; --title: #171c21; --tsize: 19.6px; --track: 3.4px; --rail: 1; --bar: 0.8px; }
.pp[data-look="midnight"] { --paper: #f9f9fa; --band: #0e1114; --bandH: 53.6px; --bandAcc: #6bb894; --onBand: #edf2f1; --acc: #479f80; --accInk: #296b57; --mist: #edeff1; --title: #0e1114; --tfont: var(--sf); --tw: 700; --tsize: 15px; --track: 2px; --tick: 0; --sh: 38px; --bar: 1.3px; }
.pp[data-look="sand"] { --paper: #fbf9f4; --band: #6b4d2e; --bandH: 45.8px; --bandAcc: #e0ba7a; --onBand: #fbf6ee; --acc: #ad7838; --accInk: #7a5224; --mist: #f6f1e8; --ink: #1f170f; --muted: #73614d; --faint: #9e8a70; --title: #2e1f12; --tsize: 16.3px; --track: 2.4px; --sh: 33px; --bar: 1px; }
.pp[data-look="forge"] { --paper: #fefefd; --band: #145c47; --bandH: 51px; --bandAcc: #c7ebd6; --onBand: #f7fcf7; --acc: #1f7a5c; --accInk: #0f4d38; --mist: #edf5f1; --ink: #0f1714; --muted: #52665e; --faint: #80948a; --title: #0d382e; --tfont: ui-rounded, "SF Pro Rounded", var(--sf); --tw: 800; --tsize: 15.7px; --track: 1.4px; --tick: 0; --sh: 37px; --bar: 2px; }

.pp-band { left: 0; right: 0; top: 0; height: var(--bandH); background: var(--band); box-shadow: 0 2px 0 var(--bandAcc); }
.pp:not([data-look="inkBand"]):not([data-look="midnight"]):not([data-look="sand"]):not([data-look="forge"]) .pp-band { display: none; }
.pp-rail { left: 0; top: 0; bottom: 0; width: 3px; background: var(--acc); opacity: calc(var(--rail) * 0.55); }
.pp-tick { top: 14.4px; width: 6.5px; height: 6.5px; opacity: calc(var(--tick) * 0.45); }
.pp-tl { left: 14.4px; box-shadow: inset 0.6px 0.6px 0 var(--acc); }
.pp-tr { right: 14.4px; box-shadow: inset -0.6px 0.6px 0 var(--acc); }

/* letterhead: on the paper, or on the band */
.pp-mark { left: 32px; top: 24px; width: 31px; height: 31px; border-radius: 7px; overflow: hidden; }
.pm-mono { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: -0.02em; color: #fff; background: #0e252d; border-radius: inherit; }
.pp[data-mark="teal"] .pm-mono { background: #26948c; }
.pp[data-mark="line"] .pm-mono { background: #fff; color: #0e252d; box-shadow: inset 0 0 0 1.6px #0e252d; }
.pm-logo { position: absolute; inset: 0; opacity: 0; }
.pm-logo svg { width: 100%; height: 100%; }
.pp[data-mark="logo"] .pm-logo { opacity: 1; }
.pp[data-mark="logo"] .pm-mono { opacity: 0; }
.pp-biz { left: 72px; top: 23px; display: flex; flex-direction: column; gap: 1.6px; }
.pp-biz b { font-family: var(--tfont); font-size: 10.2px; font-weight: 650; color: var(--title); margin-bottom: 1px; letter-spacing: -0.005em; }
.pp-trade { font-size: 4.9px; font-weight: 650; letter-spacing: 0.9px; color: var(--accInk); margin-bottom: 1.5px; }
.pp-biz span { font-size: 5.5px; color: var(--faint); white-space: nowrap; }
.pp-biz span:first-of-type { color: var(--muted); }
.pp-title { right: 32px; top: 21px; height: 22px; overflow: hidden; }
.pp-roll { display: flex; flex-direction: column; align-items: flex-end; transform: translateY(calc(var(--roll, 0) * -22px)); }
.pp-roll i { font-style: normal; font-family: var(--tfont); font-weight: var(--tw); font-size: var(--tsize); line-height: 22px; letter-spacing: var(--track); margin-right: calc(var(--track) * -1); color: var(--title); }
.pp-title::after { content: ""; position: absolute; right: 0; bottom: 0; width: 28px; height: var(--bar); background: var(--acc); }
.pp-pill { right: 32px; top: 50px; padding: 2px 5px; border-radius: 5px; font-size: 5.2px; font-weight: 650; letter-spacing: 0.2px; color: var(--accInk); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.pp[data-s="draft"] .pp-pill { color: #5c6468; background: #eceeed; }
.pp[data-s="unpaid"] .pp-pill { color: #b0453e; background: rgba(199, 74, 66, 0.1); }
.pp[data-s="partial"] .pp-pill { color: #9a6a1c; background: rgba(232, 178, 92, 0.2); }
.pp[data-s="paid"] .pp-pill { color: var(--q-paid, #1f734d); background: rgba(31, 115, 77, 0.14); }
.pp-meta { right: 32px; top: 64px; width: 100px; display: grid; gap: 3.6px; }
.pp-meta p { display: flex; justify-content: space-between; font-size: 5.3px; color: var(--muted); }
.pp-meta small { font-size: 4.6px; font-weight: 700; letter-spacing: 0.7px; color: var(--faint); }
.pp-meta b { font-weight: 650; color: var(--ink); }
/* band looks: name and title on the band, the meta lower down, the body moves down by --sh */
.pp[data-look="inkBand"] .pp-mark, .pp[data-look="midnight"] .pp-mark, .pp[data-look="sand"] .pp-mark, .pp[data-look="forge"] .pp-mark { top: 11px; width: 26px; height: 26px; }
.pp[data-look="inkBand"] .pp-biz, .pp[data-look="midnight"] .pp-biz, .pp[data-look="sand"] .pp-biz, .pp[data-look="forge"] .pp-biz { left: 66px; top: 12px; }
.pp[data-look="inkBand"] .pp-biz b, .pp[data-look="midnight"] .pp-biz b, .pp[data-look="sand"] .pp-biz b, .pp[data-look="forge"] .pp-biz b { color: var(--onBand); font-size: 9.2px; }
.pp[data-look="inkBand"] .pp-trade, .pp[data-look="midnight"] .pp-trade, .pp[data-look="sand"] .pp-trade, .pp[data-look="forge"] .pp-trade { color: var(--bandAcc); margin-bottom: 0; }
.pp[data-look="inkBand"] .pp-biz span, .pp[data-look="midnight"] .pp-biz span, .pp[data-look="sand"] .pp-biz span, .pp[data-look="forge"] .pp-biz span { position: absolute; left: -34px; top: calc(56px + var(--k, 0) * 7.5px); color: var(--muted); }
.pp-biz span:nth-of-type(1) { --k: 0; } .pp-biz span:nth-of-type(2) { --k: 1; } .pp-biz span:nth-of-type(3) { --k: 2; }
.pp[data-look="inkBand"] .pp-title, .pp[data-look="midnight"] .pp-title, .pp[data-look="sand"] .pp-title, .pp[data-look="forge"] .pp-title { top: calc(var(--bandH) / 2 - 11px); }
.pp[data-look="inkBand"] .pp-roll i, .pp[data-look="midnight"] .pp-roll i, .pp[data-look="sand"] .pp-roll i, .pp[data-look="forge"] .pp-roll i { color: var(--onBand); }
.pp[data-look="inkBand"] .pp-title::after, .pp[data-look="midnight"] .pp-title::after, .pp[data-look="sand"] .pp-title::after, .pp[data-look="forge"] .pp-title::after { display: none; }
.pp[data-look="inkBand"] .pp-pill, .pp[data-look="midnight"] .pp-pill, .pp[data-look="sand"] .pp-pill, .pp[data-look="forge"] .pp-pill { top: calc(var(--bandH) + 12px); }
.pp[data-look="inkBand"] .pp-meta, .pp[data-look="midnight"] .pp-meta, .pp[data-look="sand"] .pp-meta, .pp[data-look="forge"] .pp-meta { top: calc(var(--bandH) + 26px); }

.pp-rule { left: 32px; right: 32px; top: calc(96px + var(--sh)); height: 0.6px; background: color-mix(in srgb, var(--title) 22%, transparent); }
.pp-rule::after { content: ""; position: absolute; left: 50%; top: calc(var(--bar) / -2); width: 18px; height: var(--bar); margin-left: -9px; background: var(--acc); }
.pp-from, .pp-to { top: calc(107px + var(--sh)); width: 150px; display: flex; flex-direction: column; gap: 1.7px; }
.pp-from { left: 32px; } .pp-to { left: 200px; }
.pp-from small, .pp-to small { font-size: 4.9px; font-weight: 700; letter-spacing: 1px; color: color-mix(in srgb, var(--muted) 70%, transparent); margin-bottom: 2px; }
.pp-to small { color: var(--accInk); }
.pp-from b, .pp-to b { font-family: var(--tfont); font-size: 8.2px; font-weight: 650; color: var(--ink); margin-bottom: 1px; }
.pp-from span, .pp-to span { font-size: 5.5px; color: var(--muted); }
.pp-th { left: 32px; right: 32px; top: calc(160px + var(--sh)); height: 13px; background: var(--mist); font-size: 5.1px; font-weight: 700; letter-spacing: 0.7px; color: var(--muted); }
.pp[data-look="harborSerif"] .pp-th { background: none; box-shadow: inset 0 -0.5px 0 color-mix(in srgb, var(--title) 30%, transparent), inset 0 0.5px 0 color-mix(in srgb, var(--title) 30%, transparent); }
.pp-th span { position: absolute; top: 4.2px; }
.pp-th span:nth-child(1) { left: 5px; } .pp-th span:nth-child(2) { right: 128px; } .pp-th span:nth-child(3) { right: 72px; } .pp-th span:nth-child(4) { right: 5px; }
.pp-line { left: 32px; right: 32px; height: 22px; font-size: 6.4px; box-shadow: inset 0 -0.5px 0 color-mix(in srgb, var(--title) 12%, transparent); }
.pp-l0 { top: calc(176px + var(--sh)); } .pp-l1 { top: calc(198px + var(--sh)); } .pp-l2 { top: calc(220px + var(--sh)); }
.pp-line > span { position: absolute; top: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-d { left: 5px; font-weight: 600; color: var(--ink); }
.pl-d small { display: block; margin-top: 1.4px; font-size: 4.3px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--faint); }
.pl-q { right: 128px; color: var(--muted); } .pl-r { right: 72px; color: var(--muted); } .pl-a { right: 5px; font-weight: 650; color: var(--ink); }
.pp-line[data-off="1"] { opacity: 0; }
.pp-tot { right: 32px; top: calc(258px + var(--sh)); width: 150px; display: flex; flex-direction: column; gap: 4.6px; }
.pp-tot p { display: flex; justify-content: space-between; align-items: baseline; font-size: 6px; color: var(--muted); }
.pp-tot b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.pp-tax2 { height: calc(var(--tax2, 0) * 7px); overflow: hidden; opacity: var(--tax2, 0); margin-top: calc(var(--tax2, 0) * 0px); }
.pp-grand { margin-top: 3px; padding: 7px 8px; border-radius: 3px; background: var(--accInk); color: rgba(255, 255, 255, 0.82) !important; }
.pp-grand .p-glabel { font-size: 4.9px; font-weight: 700; letter-spacing: 0.9px; color: rgba(255, 255, 255, 0.82); }
.pp-grand b { font-family: var(--serif); font-size: 14px; font-weight: 600; color: #fff; }
.pp-sign { left: 240px; right: 32px; top: 432px; height: 40px; }
.pp-sign small { position: absolute; left: 0; top: 0; font-size: 5.2px; font-weight: 700; letter-spacing: 0.65px; color: color-mix(in srgb, var(--muted) 70%, transparent); }
.pp-sign > i { position: absolute; left: 0; right: 0; top: 27px; height: 0.6px; background: color-mix(in srgb, var(--title) 35%, transparent); }
.pp-sigl em { position: absolute; top: 30px; font-style: normal; font-size: 4.2px; font-weight: 500; letter-spacing: 0.5px; color: var(--faint); }
.pp-sigl em:first-child { left: 0; } .pp-sigl em:last-child { left: 81px; }
.pp-pay { position: absolute; left: 0; top: 10px; display: flex; flex-direction: column; gap: 2px; opacity: 0; }
.pp-pay b { font-size: 7.2px; font-weight: 650; color: var(--accInk); }
.pp-pay em { font-style: normal; font-size: 5px; color: var(--muted); }
.pp.inv .pp-sigl, .pp.inv .pp-sign > i { opacity: 0; }
.pp.inv .pp-pay { opacity: 1; }
.pp.inv .p-slabel { color: var(--accInk); }
.pp-foot { left: 32px; right: 32px; top: 500px; display: flex; justify-content: space-between; font-size: 4.5px; color: var(--faint); }
/* PAID, diagonal across the page in layered green ink, as the PDF prints it */
.pp-stamp { left: 200px; top: 266px; width: 0; height: 0; opacity: var(--stamp, 0); }
.pp-stamp b, .pp-stamp i { position: absolute; left: -64px; top: -21px; width: 128px; height: 42px; border-radius: 2px; transform: rotate(-51deg) scale(var(--ss, 1)); }
.pp-stamp b { display: grid; place-items: center; padding-left: 4px; font-family: var(--sf); font-size: 23.5px; font-weight: 900; letter-spacing: 3.9px; color: rgba(31, 115, 77, 0.8); border: 1.7px solid rgba(31, 115, 77, 0.78); box-shadow: inset 0 0 0 2.1px var(--paper), inset 0 0 0 2.7px rgba(31, 115, 77, 0.5); }
.pp-stamp i:nth-child(1) { border: 1.7px solid rgba(31, 115, 77, 0.18); margin: 0.7px 0 0 0.9px; }
.pp-stamp i:nth-child(2) { border: 1.7px solid rgba(31, 115, 77, 0.26); margin: 0.3px 0 0 -0.5px; }
.qform > .qrow:first-child { top: 0; }