/* Qiv — "Harbor" look: slate, emerald, a pale mesh, New York for money. Screens are laid out at their
   device's own size (iPhone 393 × 886, iPad 1080 × 728, Watch 208 × 260) and mapped onto the glass. */
.app-qiv, .qair {
  --q-text: #171a1c; --q-muted: #666f73; --q-faint: #949a9d; --q-line: #d7dbda;
  --q-slate: #20252a; --q-mid: #424d54; --q-em: #258566; --q-em2: #6bb894; --q-owing: #c74a42;
  --q-serif: ui-serif, "New York", Georgia, serif;
}
.app-qiv { color: var(--q-text); background: #f5f6f5; }
.app-qiv .mp { overflow: hidden; }
.app-qiv svg { display: block; width: 100%; height: 100%; }

.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%);
}

/* status bar: the iPhone's, or the iPad's with its date */
.qsb { color: var(--q-text); font-weight: 600; }
.qsb > b { position: absolute; left: calc(34px - var(--pad, 0) * 18px); top: calc(18px - var(--pad, 0) * 12px); font-size: calc(16px - var(--pad, 0) * 3px); letter-spacing: -0.01em; }
.qsb-date { position: absolute; left: 56px; top: 6px; font-size: 13px; opacity: var(--pad, 0); white-space: nowrap; }
.qsb-ic { position: absolute; right: calc(30px - var(--pad, 0) * 14px); top: calc(20px - var(--pad, 0) * 12px); display: flex; align-items: flex-end; gap: 2px; }
.qsb-ic i { width: 3px; border-radius: 1px; background: currentColor; }
.qsb-ic i:nth-child(1) { height: 5px; } .qsb-ic i:nth-child(2) { height: 8px; } .qsb-ic i:nth-child(3) { height: 11px; }
.qsb-batt { width: 24px; height: 11px; margin-left: 6px; border-radius: 3.5px; box-shadow: inset 0 0 0 1.2px currentColor; position: relative; }
.qsb-batt::after { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 15px; border-radius: 1.5px; background: currentColor; }

.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; }
.qback { display: flex; align-items: center; gap: 2px; font-size: 17px; color: var(--q-em); white-space: nowrap; }
.qback svg { width: 20px; height: 20px; }
.qnavt { font-size: 17px; font-weight: 650; white-space: nowrap; }
.qcirc { display: grid; place-items: center; background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.08); color: var(--q-slate); }
.qcirc svg { width: 19px; height: 19px; }
.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 iPad's day strip */
.qdays { display: flex; gap: 4px; padding: 6px; background: rgba(255, 255, 255, 0.74); box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.07); }
.qdays span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 12px; }
.qdays small { font-size: 9px; color: var(--q-muted); }
.qdays b { font-size: 14px; font-weight: 650; }
.qdays i { width: 4px; height: 4px; border-radius: 50%; margin-top: 2px; }
.qdays i.g { background: var(--q-em); } .qdays i.r { background: var(--q-owing); }
.qdays .on { background: var(--q-slate); color: #fff; }
.qdays .on small { color: rgba(255, 255, 255, 0.7); }

/* the Book's library card */
.qbook { background: linear-gradient(150deg, #0e1114 0%, #122421 55%, #235a4b 100%); color: #fff; }
.qbh-top { position: absolute; left: 18px; right: 18px; top: 16px; }
.qbh-top small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--q-em2); }
.qbh-top b { display: block; margin-top: 3px; font-size: 17px; font-weight: 650; }
.qbh-top span { position: absolute; right: 0; top: 2px; padding: 4px 8px; border-radius: 9px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: #85dbb3; background: rgba(107, 184, 148, 0.16); }
.qbh-tiles { position: absolute; left: 14px; right: 14px; top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qbh-tiles span { height: 70px; padding: 9px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.qbh-tiles b { display: block; font-size: 19px; font-weight: 700; line-height: 1.1; }
.qbh-tiles small { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; }
.qbh-tiles em { display: block; font-style: normal; font-size: 9px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a rate in the Book, which becomes a line on the estimate */
.qrow { background: rgba(254, 254, 254, calc(1 - var(--tbl, 0))); box-shadow: inset 0 0 0 1px rgba(32, 37, 42, calc(0.08 * (1 - var(--tbl, 0)))); }
.qr-hi { position: absolute; inset: 0; background: rgba(37, 133, 102, 0.09); box-shadow: inset 0 0 0 1.5px rgba(37, 133, 102, 0.35); border-radius: inherit; opacity: calc(var(--pk, 0) * (1 - var(--tbl, 0))); }
.qr-book { position: absolute; inset: 0; opacity: clamp(0, calc((0.6 - var(--tbl, 0)) * 3), 1); }
.qr-book small { position: absolute; left: 16px; top: 9px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--q-faint); }
.qr-book b { position: absolute; left: 16px; top: 23px; font-size: 15px; font-weight: 650; white-space: nowrap; }
.qr-book em { position: absolute; right: 58px; top: 17px; font-style: normal; font-size: 15px; font-weight: 700; color: var(--q-em); white-space: nowrap; }
.qr-book em i { font-style: normal; font-weight: 500; font-size: 12px; color: var(--q-muted); margin-left: 3px; }
.qr-add { position: absolute; right: 13px; top: 11px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--q-em); background: rgba(37, 133, 102, 0.1); }
.qr-add > svg { width: 16px; height: 16px; opacity: calc(1 - var(--pk, 0)); }
.qr-ok { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: var(--q-em); color: #fff; opacity: var(--pk, 0); transform: scale(calc(0.6 + var(--pk, 0) * 0.4)); }
.qr-ok svg { width: 16px; height: 16px; }
.qr-line, .qp-line { position: absolute; left: 0; top: 0; width: 352px; height: 28px; font-size: 11px; }
.qr-line { opacity: calc(clamp(0, calc((var(--tbl, 0) - 0.4) * 3), 1) * (1 - var(--away, 0))); }
.qr-line span, .qp-line span { position: absolute; top: 8px; white-space: nowrap; }
.qr-line .d, .qp-line .d { left: 0; font-weight: 550; }
.qr-line .q, .qp-line .q { left: 186px; color: var(--q-muted); }
.qr-line .r, .qp-line .r { right: 78px; color: var(--q-muted); font-variant-numeric: tabular-nums; }
.qr-line .a, .qp-line .a { right: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.qr-line::after, .qp-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #eceeed; }

/* the estimate: a sheet of paper (400 × 518), scaled as a whole */
.qpaper { width: 400px; height: 518px; color: var(--q-text); font-family: var(--sf); }
.qp-in {
  position: absolute; inset: 0; border-radius: 6px; background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 20, 0.08), 0 10px 26px rgba(16, 24, 20, 0.1);
  opacity: calc(1 - var(--away, 0));
}
.qp-in > * { position: absolute; }
.qp-mono { left: 24px; top: 24px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #2a9a75, #145c47); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.qp-biz { left: 66px; top: 22px; display: flex; flex-direction: column; gap: 2px; }
.qp-biz b { font-family: var(--q-serif); font-size: 16px; font-weight: 650; margin-bottom: 1px; }
.qp-biz small { font-size: 7.5px; color: var(--q-muted); }
.qp-kind { right: 24px; top: 20px; height: 22px; overflow: hidden; }
.qp-roll { display: flex; flex-direction: column; align-items: flex-end; transform: translateY(calc(var(--roll, 0) * -22px)); }
.qp-roll i { font-style: normal; font-family: var(--q-serif); font-size: 17px; line-height: 22px; letter-spacing: 0.14em; }
.qp-meta { right: 24px; top: 46px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 8.5px; color: var(--q-muted); }
.qp-no { color: var(--q-text); font-weight: 650; }
.qp-rule { left: 24px; right: 24px; top: 100px; height: 1px; background: var(--q-line); }
.qp-box { top: 112px; width: 170px; height: 60px; padding: 8px 10px; border-radius: 8px; border: 1px dashed #c4ccc9; display: flex; flex-direction: column; gap: 2px; }
.qp-box small { font-size: 7px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-faint); }
.qp-box b { font-size: 10.5px; font-weight: 700; }
.qp-box span { font-size: 8.5px; color: var(--q-muted); }
.qp-bill { left: 24px; } .qp-valid { right: 24px; }
.qp-th { left: 24px; right: 24px; top: 190px; height: 16px; border-bottom: 1px solid var(--q-line); font-size: 7px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-faint); }
.qp-th span { position: absolute; top: 2px; }
.qp-th span:nth-child(1) { left: 0; } .qp-th span:nth-child(2) { left: 186px; } .qp-th span:nth-child(3) { right: 78px; } .qp-th span:nth-child(4) { right: 0; }
.qpaper .qp-line { left: 24px; }
.qp-tot { right: 24px; top: 312px; width: 190px; display: flex; flex-direction: column; gap: 5px; }
.qp-tot p { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--q-muted); }
.qp-tot b { color: var(--q-text); font-weight: 650; font-variant-numeric: tabular-nums; }
.qp-tot .qp-grand { align-items: baseline; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--q-line); }
.qp-gl { font-size: 7.5px; font-weight: 700; letter-spacing: 0.12em; }
.qp-total { font-family: var(--q-serif); font-size: 18px; }
.qp-notes { left: 24px; top: 404px; width: 230px; display: flex; flex-direction: column; gap: 3px; }
.qp-notes small, .qp-sign small { font-size: 7px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-faint); }
.qp-notes span { font-size: 8.5px; line-height: 1.4; color: var(--q-muted); }
.qp-sign { left: 24px; right: 24px; top: 462px; display: flex; gap: 28px; }
.qp-sign span { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.qp-sign span:last-child { flex: 0.5; }
.qp-sign i { height: 1px; background: #c4ccc9; }
.qp-foot { left: 0; right: 0; top: 500px; text-align: center; font-size: 7px; color: var(--q-faint); }

.qslot { border: 1.5px dashed rgba(32, 37, 42, 0.18); background: rgba(32, 37, 42, 0.035); }
.qchip { width: 64px; height: 18px; }
.qchip-in { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 9px; font-style: normal; font-size: 9px; font-weight: 700; opacity: calc(1 - var(--away, 0)); color: #5c6468; background: #eceeed; }
.qchip[data-s="quoted"] .qchip-in, .qair-chip .qchip-in { color: var(--q-em); background: rgba(37, 133, 102, 0.12); }
.qchip[data-s="unpaid"] .qchip-in { color: var(--q-owing); background: rgba(199, 74, 66, 0.1); }
.qpvw { display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 11px; background: var(--q-slate); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; }
.qpvw i { width: 5px; height: 5px; border-radius: 50%; background: #6bb894; }

.qbtn { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 650; box-shadow: inset 0 0 0 100px rgba(0, 0, 0, calc(var(--down, 0) * 0.14)); }
.qbtn svg { width: 17px; height: 17px; flex: none; }
.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.08)); }
.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; }
.qfoot { background: #fff; box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.08); }
.qfoot span { position: absolute; left: 18px; top: 15px; display: flex; flex-direction: column; gap: 3px; }
.qfoot small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-muted); }
.qfoot em { font-style: normal; font-size: 12px; color: var(--q-faint); }
.qf-amt { position: absolute; right: 18px; top: 15px; font-family: var(--q-serif); font-size: 27px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* the hero: the iPhone's big card, or the iPad desk's mini hero */
.qhero { background: linear-gradient(150deg, #0e1114 0%, #122421 52%, #235a4b 100%); color: #fff; }
.qh-p { position: absolute; left: 0; top: 0; width: 361px; height: 238px; opacity: clamp(0, calc((0.62 - var(--mini, 0)) * 3.2), 1); }
.qh-m { position: absolute; left: 0; top: 0; width: 552px; height: 144px; opacity: clamp(0, calc((var(--mini, 0) - 0.38) * 3.2), 1); }
.qhero .qh-p > *, .qhero .qh-m > * { 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); }
.qh-amt { font-family: var(--q-serif); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qh-p .qh-amt { left: 18px; top: 54px; font-size: 46px; line-height: 1; }
.qh-amt span:last-child { 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="inv"] .qh-bar i:nth-child(1) { width: 62%; background: #e87a72; } .qhero[data-mode="inv"] .qh-bar i:nth-child(2) { width: 12%; background: #e8b25c; } .qhero[data-mode="inv"] .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="inv"] .qh-leg i:nth-child(1)::before { background: #e87a72; } .qhero[data-mode="inv"] .qh-leg i:nth-child(2)::before { background: #e8b25c; } .qhero[data-mode="inv"] .qh-leg i:nth-child(3)::before { background: var(--q-em2); }
.qh-spark { left: 20px; right: 20px; top: 166px; height: 62px; }
.qh-spark small, .qhm-spark small { display: block; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.5); }
.qh-spark svg { height: 38px; margin-top: 3px; }
.sp-line { fill: none; stroke: var(--q-em2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sp-area { 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; }
.qh-m .qh-eye { top: 18px; }
.qh-m .qh-amt { left: 18px; top: 36px; font-size: 34px; line-height: 1; }
.qhm-line { left: 20px; top: 84px; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.qhm-line b { color: #fff; font-weight: 650; }
.qhm-pills { left: 20px; top: 108px; display: flex; gap: 6px; }
.qhm-pills i { font-style: normal; padding: 4px 9px; border-radius: 10px; font-size: 10.5px; color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.08); white-space: nowrap; }
.qhm-pills b { color: #fff; }
.qhm-spark { right: 20px; top: 20px; width: 190px; height: 104px; }
.qhm-spark em { position: absolute; right: 0; top: -1px; font-style: normal; font-size: 10px; font-weight: 700; color: #85dbb3; }
.qhm-spark svg { height: 70px; margin-top: 10px; }

/* the board */
.qhandle { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-faint); white-space: nowrap; }
.qhandle em { font-style: normal; font-weight: 500; letter-spacing: 0.02em; }
.qcol { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--q-muted); white-space: nowrap; }
.qcol b { color: var(--q-text); margin-left: 3px; }
.qbc, .qq { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(32, 37, 42, 0.1); }
.qbc-in { position: absolute; left: 10px; right: 10px; top: 9px; }
.qbc-in b, .qq-b b { display: block; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qbc-in small, .qq-b small { display: block; margin-top: 1px; font-size: 9px; color: var(--q-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qbc-in em, .qq-b em { display: block; margin-top: 7px; font-style: normal; font-family: var(--q-serif); font-size: 14px; font-weight: 650; }
.qnone { font-size: 11px; font-style: italic; color: var(--q-faint); }

/* the quote that travels: a board card on the iPad, a list card on the iPhone */
.qq-b { position: absolute; left: 0; top: 0; width: 132px; height: 76px; padding: 9px 10px; opacity: clamp(0, calc((0.62 - var(--ph, 1)) * 3.2), 1); }
.qq-p { position: absolute; left: 0; top: 0; width: 361px; height: 164px; opacity: clamp(0, calc((var(--ph, 1) - 0.38) * 3.2), 1); }
.qqb-ok { position: absolute; left: 10px; bottom: 7px; display: flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; color: var(--q-em); opacity: 0; }
.qqb-ok svg { width: 10px; height: 10px; }
.qq.converted .qqb-ok { opacity: 1; }
.qcard { position: absolute; left: 0; top: 0; width: 361px; height: 164px; }
.qcard > * { 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; }
.qcard[data-s="quoted"] .qc-chip { color: var(--q-em); background: rgba(37, 133, 102, 0.12); }
.qcard[data-s="unpaid"] .qc-chip { color: var(--q-owing); background: rgba(199, 74, 66, 0.1); }
.qcard[data-s="paid"] .qc-chip { color: #1f734d; background: rgba(31, 115, 77, 0.14); }
.qc-amt { right: 16px; top: 41px; font-style: normal; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.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; }
.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); }
.qcard.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.14); }
.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; }
.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 svg { width: 16px; height: 16px; }
.qcard.is-paid .qc-slide { background: #1f734d; }
.qcard.is-paid .qc-knob { color: #1f734d; }
.qc-stamp {
  left: 150px; top: 63px; padding: 2px 10px; border: 2.5px solid #1f734d; border-radius: 8px; color: #1f734d; font-style: normal;
  font-family: var(--q-serif); font-size: 20px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: var(--stamp, 0); transform: rotate(-14deg) scale(calc(1.8 - var(--stamp, 0) * 0.8));
}
.qcard-short { height: 106px; }
.qcard-short .qc-slide, .qcard-short .qc-stamp { display: none; }

/* the convert slider: full width on the iPhone, a strip on the board card */
.qslider { background: linear-gradient(180deg, #3b3f44, #2b3034); --ks: calc(48px - var(--mini, 0) * 34px); }
.qslider.done { 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.14); }
.qs-lab { position: absolute; inset: 0; color: #fff; font-weight: 650; white-space: nowrap; }
.qs-lab b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; }
.qs-big { font-size: 14px; padding-left: 40px; opacity: clamp(0, calc((0.6 - var(--mini, 0)) * 3), 1); }
.qs-small { font-size: 8.5px; padding-left: 12px; opacity: clamp(0, calc((var(--mini, 0) - 0.45) * 3), 1); }
.qs-knob { position: absolute; top: 3px; left: calc(3px + var(--kn, 0) * (100% - var(--ks) - 6px)); width: var(--ks); height: var(--ks); border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--q-slate); }
.qs-knob svg { width: 52%; height: 52%; }

.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: 4px; width: calc(33.33% - 5px); border-radius: 18px; background: var(--q-em); }
.qrail[data-sel="1"] .qrl-th { left: calc(33.33% + 1px); }
.qrl-seg b { position: relative; flex: 1; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--q-muted); }
.qrail[data-sel="0"] .qrl-a, .qrail[data-sel="1"] .qrl-b { color: #fff; }
.qrl-s { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; }

.qnew { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(180deg, #3b3f44, #2a2f33); color: #fff; font-size: 15px; font-weight: 650; }
.qnew svg { width: 17px; height: 17px; }

/* the tab dock: a glass capsule on the iPhone, page dots on the iPad */
.qdock { background: rgba(255, 255, 255, 0.82); box-shadow: inset 0 0 0 1px rgba(32, 37, 42, 0.07), 0 8px 22px rgba(16, 24, 20, calc(0.1 * var(--sh, 1))); }
.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); }

/* the PDF in the air */
.qair { position: absolute; inset: 0; visibility: hidden; }
.qair-paper { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 6px; box-shadow: 0 2px 4px rgba(10, 30, 20, 0.12), 0 24px 60px rgba(5, 20, 12, 0.28); }
.qair-chip { left: 312px; top: 74px; }
.qair-shadow { position: absolute; left: 0; top: 0; width: 400px; height: 518px; transform-origin: 0 0; border-radius: 30px; background: radial-gradient(closest-side, rgba(5, 25, 15, 0.5), rgba(5, 25, 15, 0)); }

/* the Watch companion (Cedar Sample Co., its own sample shop) */
.app-qiv-watch { background: #08090b; color: #fff; font-family: ui-rounded, "SF Pro Rounded", var(--sf); }
.qw { position: absolute; inset: 0; }
.qw > * { position: absolute; }
.qw-top { left: 14px; right: 12px; top: 12px; display: flex; justify-content: space-between; align-items: center; }
.qw-top b { font-size: 12px; font-weight: 650; color: #85dbb3; }
.qw-top span { display: flex; padding: 2px; border-radius: 8px; background: #1b1e22; }
.qw-top i { font-style: normal; padding: 2px 6px; border-radius: 6px; font-size: 9px; font-weight: 650; color: #8a9095; }
.qw-top i.on { background: #2c3136; color: #fff; }
.qw-ring { left: 24px; top: 34px; width: 160px; height: 160px; }
.qw-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qw-track { fill: none; stroke: #1d2125; stroke-width: 13; }
.qw-arc { fill: none; stroke: #f57a57; stroke-width: 13; stroke-linecap: round; }
.qw-ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.qw-ring small { font-size: 11px; color: #8a9095; }
.qw-ring b { font-size: 27px; font-weight: 700; color: #f57a57; font-variant-numeric: tabular-nums; }
.qw-month { left: 14px; top: 202px; font-size: 10px; color: #8a9095; }
.qw-bar { left: 14px; right: 14px; top: 219px; height: 4px; display: flex; gap: 2px; }
.qw-bar i { border-radius: 2px; }
.qw-bar i:first-child { background: #47bd8f; } .qw-bar i:last-child { background: #f57a57; }
.qw-foot { left: 14px; right: 14px; top: 230px; display: flex; justify-content: space-between; font-size: 10px; color: #c9ced2; }