/* Invoice's proposals (PROPOSALS-PLAN.md): the editor's extra pieces and the proposal's pages. A page is A4; every size
   inside it is in --u, one 794th of the page's width, so the same HTML is the preview at any width, the 794 px page
   drawn into the PDF (.fixed sets --u to 1px), and the printed page (210 mm). Always light: it's a printed document. */
.ppw{display:grid;gap:14px;margin:12px 0 4px}
@media (min-width:700px){.ppw{max-width:794px;margin:14px auto 4px}}
.pp{--u:calc(100cqw/794);container-type:inline-size;position:relative;width:100%;aspect-ratio:210/297;overflow:hidden;background:#fff;color:#15161f;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 10px 30px rgba(0,0,0,.08);border:1px solid var(--rule,#e1e2ea);color-scheme:light;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pp.fixed{--u:1px;width:794px;height:1123px;aspect-ratio:auto;border-radius:0;box-shadow:none;border:0}
.pp{--acc:#3d4fd6;--ink:#15161f;--grey:#5d6070;--line:#e4e5ec;font:calc(14*var(--u))/1.5 var(--font,system-ui,sans-serif);font-variant-numeric:tabular-nums}
.pp *{box-sizing:border-box}
.pp .pi{position:absolute;inset:calc(64*var(--u)) calc(60*var(--u)) calc(78*var(--u));overflow:hidden}
.pp .pn{position:absolute;left:calc(60*var(--u));right:calc(60*var(--u));bottom:calc(34*var(--u));display:flex;justify-content:space-between;color:var(--grey);font-size:calc(11*var(--u));border-top:calc(1*var(--u)) solid var(--line);padding-top:calc(8*var(--u))}
.pp .bar{position:absolute;left:0;right:0;top:0;height:calc(8*var(--u));background:var(--acc)}
.pp h2{font-size:calc(20*var(--u));line-height:1.25;margin:0 0 calc(8*var(--u));letter-spacing:-.01em}
.pp h3{font-size:calc(11*var(--u));letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 calc(6*var(--u));font-weight:800}
.pp p{margin:0 0 calc(10*var(--u))}
.pp .blk{padding-bottom:calc(22*var(--u))}
.pp .txt{white-space:pre-line}
/* cover */
.pp.cover .pi{display:flex;flex-direction:column}
.pp .cv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(20*var(--u))}
.pp .cv-top img{max-height:calc(64*var(--u));max-width:calc(220*var(--u));display:block}
.pp .cv-biz{font-weight:700;font-size:calc(16*var(--u))}
.pp .cv-ad{color:var(--grey);white-space:pre-line;font-size:calc(12*var(--u))}
.pp .cv-pic{margin:calc(40*var(--u)) calc(-60*var(--u)) 0;height:calc(300*var(--u));background:#eef0f6 center/cover no-repeat}
.pp .cv-mid{margin-top:auto;padding-bottom:calc(20*var(--u))}
.pp .cv-kind{font-size:calc(13*var(--u));font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);margin:0 0 calc(12*var(--u))}
.pp .cv-title{font-size:calc(46*var(--u));line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:0 0 calc(10*var(--u))}
.pp .cv-sub{font-size:calc(18*var(--u));color:var(--grey);margin:0 0 calc(28*var(--u))}
.pp .cv-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(16*var(--u));border-top:calc(2*var(--u)) solid var(--ink);padding-top:calc(14*var(--u))}
.pp .cv-meta small{display:block;color:var(--grey);font-size:calc(11*var(--u));letter-spacing:.1em;text-transform:uppercase}
.pp .cv-meta b{font-size:calc(15*var(--u))}
/* timeline, prices, payments */
.pp table{width:100%;border-collapse:collapse}
.pp th{font-size:calc(10.5*var(--u));letter-spacing:.12em;text-transform:uppercase;color:var(--grey);text-align:right;padding:calc(7*var(--u)) 0 calc(7*var(--u)) calc(10*var(--u));border-bottom:calc(2*var(--u)) solid var(--ink);font-weight:700}
.pp th:first-child,.pp td:first-child{text-align:left;padding-left:0}
.pp td{padding:calc(8*var(--u)) 0 calc(8*var(--u)) calc(10*var(--u));border-bottom:calc(1*var(--u)) solid var(--line);text-align:right;vertical-align:top}
.pp td:first-child{font-weight:600}
.pp td small{display:block;color:var(--grey);font-weight:400}
.pp .ms td:first-child{width:28%;color:var(--grey);font-weight:600}
.pp .ms td:last-child{text-align:left;font-weight:600;color:var(--ink)}
.pp tr.po td{color:var(--grey)}
.pp tr.po td:first-child{color:var(--ink)}
.pp .tag{display:inline-block;font-size:calc(9.5*var(--u));font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);border:calc(1*var(--u)) solid currentColor;border-radius:calc(4*var(--u));padding:0 calc(5*var(--u));margin-left:calc(6*var(--u));vertical-align:calc(2*var(--u))}
.pp tr.po.on .tag{background:var(--acc);color:#fff;border-color:var(--acc)}
.pp .tt{margin-left:auto;width:min(100%,calc(320*var(--u)));display:grid;gap:calc(3*var(--u));margin-top:calc(10*var(--u))}
.pp .tt div{display:flex;justify-content:space-between;gap:calc(12*var(--u))}
.pp .tt .g{border-top:calc(2*var(--u)) solid var(--ink);padding-top:calc(8*var(--u));margin-top:calc(4*var(--u));font-weight:800;font-size:calc(18*var(--u))}
.pp .tt .mu{color:var(--grey)}
.pp .note{color:var(--grey);font-size:calc(12*var(--u))}
.pp .cl{margin:0 0 calc(9*var(--u));font-size:calc(13*var(--u))}
.pp .cl b{display:block}
/* acceptance */
.pp .acc-sum{background:#f4f5fa;border-radius:calc(10*var(--u));padding:calc(14*var(--u)) calc(16*var(--u));margin:calc(6*var(--u)) 0 calc(26*var(--u))}
.pp .acc-sum div{display:flex;justify-content:space-between;gap:calc(12*var(--u))}
.pp .acc-sum .g{font-weight:800;font-size:calc(17*var(--u))}
.pp .acc-who{display:grid;grid-template-columns:1fr 1fr;gap:calc(34*var(--u));margin-top:calc(16*var(--u))}
.pp .acc-who h3{margin-bottom:calc(14*var(--u))}
.pp .sl{position:relative;border-bottom:calc(1*var(--u)) solid var(--ink);margin:0 0 calc(4*var(--u))}
.pp .sl.s-sig{height:calc(56*var(--u))}.pp .sl.s-ln{height:calc(26*var(--u))}
.pp .sl-l{color:var(--grey);font-size:calc(11*var(--u));margin:0 0 calc(16*var(--u))}
.pp .sl-v{position:absolute;left:0;bottom:calc(4*var(--u));font-weight:600}
.pp .foot{color:var(--grey);font-size:calc(11*var(--u));margin-top:calc(26*var(--u))}
/* the editor */
.pe-sec{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin:22px 2px 8px;display:flex;align-items:center;gap:8px}
.pe-sec .sp{flex:1}
.pe-row{background:var(--soft);border-radius:12px;padding:10px;margin:0 0 8px;display:grid;gap:8px}
.pe-row .pe-h{display:flex;gap:8px;align-items:center}
.pe-row .pe-h input{flex:1;min-width:0}
.pe-row textarea{width:100%}
.pe-ln{display:grid;grid-template-columns:1fr 70px 100px;gap:8px;align-items:center}
.pe-ln .pe-o{grid-column:1/-1;display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:.9rem;color:var(--sub)}
.pe-ln .pe-o label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.pe-ms{display:grid;grid-template-columns:1fr 150px 44px;gap:8px;align-items:center}
.pe-pay{display:grid;grid-template-columns:1fr 70px 1fr 44px;gap:8px;align-items:center}
@media (max-width:480px){.pe-ln{grid-template-columns:1fr 60px 90px}.pe-ms{grid-template-columns:1fr 132px 44px}.pe-pay{grid-template-columns:1fr 60px 44px}.pe-pay select{grid-column:1/3;grid-row:2}}
.pe-tot{display:flex;justify-content:space-between;font-weight:700;margin:6px 2px 0}
.pe-warn{color:var(--warn);font-size:.9rem;margin:4px 2px 0}
.pe-tpl{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.pe-tpl::-webkit-scrollbar{display:none}
.pe-tpl button{flex:none;min-height:44px;border-radius:999px;border:1px solid var(--rule);background:var(--panel);padding:0 14px;font-weight:600}
.pe-tpl button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pe-sw{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pe-sw button{width:44px;height:44px;border-radius:50%;border:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pe-sw button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--c)}
.pe-pic{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pe-pic img{width:88px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--rule)}
.ib.sq{width:44px;height:44px;min-width:44px}
.pz{display:grid;gap:8px;margin:12px 0 0}
.pz .pzr{display:flex;align-items:center;gap:12px;background:var(--soft);border-radius:12px;padding:10px 12px}
.pz .pzr .t{flex:1;min-width:0}
.pz .pzr small{display:block;color:var(--sub)}
.p-tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid currentColor;border-radius:5px;padding:0 5px;margin-left:6px;vertical-align:2px}
.p-wait{background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:12px;padding:12px 14px;margin:12px 0 0}
.p-wait b{display:block}
.p-ok{background:color-mix(in srgb,var(--pos) 13%,transparent);color:var(--text);border-radius:12px;padding:12px 14px;margin:12px 0 0}
.p-ok b{color:var(--pos)}
.p-drop{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:64px;justify-content:center;border:2px dashed var(--rule);border-radius:12px;padding:12px 14px;text-align:center;color:var(--sub);margin:10px 0 0;cursor:pointer;background:var(--panel)}
.p-drop b{color:var(--accent)}.p-drop small{font-size:.85rem}
.p-drop:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.p-drop.on{border-color:var(--accent);color:var(--accent)}
.pch{display:grid;gap:6px;margin:10px 0}
.pch label{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:12px;padding:10px 12px;min-height:44px;cursor:pointer}
.pch label span{flex:1}
@media print{
  body.printing #printRoot .ppw{display:block;margin:0;max-width:none}
  body.printing #printRoot .pp{--u:calc(210mm/794);width:210mm;height:297mm;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;break-after:page;page-break-after:always}
  body.printing #printRoot .pp:last-child{break-after:auto;page-break-after:auto}
}