/* ============================================================ PASSAGE — preview-then-send panel. All classes prefixed `pv-`. Mobile-first, same breakpoints as fees.css/mobile-*.css rather than new ones. The document itself is rendered inside a sandboxed iframe, so nothing in here can style it and nothing in it can style the app — that separation is the whole reason the frame exists. ============================================================ */ /* A retainer agreement is an A4 legal document; the 860px modal that suits a form leaves it about 520px of column once the send rail is taken out, and at that width the clauses are a narrow ribbon. Widen the card ONLY when it is hosting this panel — :has() scopes it to the preview and leaves every other modal in the app at its own width. Browsers without :has() simply keep the 860px card, which is what this shipped with. Held above 760px deliberately: styles.css turns every modal into a full-width bottom sheet below that, and this rule outranks it on specificity — left unscoped it re-widths the sheet and leaves a strip of background down the right edge of a phone. */ @media (min-width:761px){ .m-card.wide:has(.pv){ width:min(1140px,96vw); } } .pv{ display:grid; grid-template-columns:1fr; gap:14px; } /* Grid items take a content-based min-width by default. A retainer letterhead is laid out for A4, so without this the document track grows past its 1fr share and the whole modal scrolls sideways — the same trap fees.css already documents for .fee-panel. */ .pv > *{ min-width:0; } /* Document left, send controls in a right rail. 820px is the width at which a 268px rail still leaves the page a readable measure; below it the two stack, document first. */ @media (min-width:820px){ .pv{ grid-template-columns:minmax(0,1fr) 268px; align-items:start; } } /* ---------- the document ---------- Three layers, and each one earns its place: .pv-doc the surface the page rests on — a shade darker than the modal, so the page has something to sit ON rather than being flush against the panel; .pv-page the page itself: bordered, lifted, and PADDED. The padding is the fix for "it looks very tight" — the agreement's own stylesheet gives its body 4px of side margin, because the PDF's printed page margin supplies the rest. On screen nothing did, so the clauses ran into the frame edge. The frame is sandboxed and this file will not reach into a legal document to restyle it, so the margin is made here, around the frame; .pv-frame the sandboxed document, scrolling inside itself so the Send button never moves while the consultant reads. */ .pv-doc{ min-width:0; border:1px solid var(--stroke); border-radius:var(--r-lg); background:var(--bone-2); overflow:hidden; padding:10px; } .pv-page{ min-width:0; background:var(--paper); border:1px solid var(--stroke-soft); border-radius:var(--r-md); box-shadow:var(--shadow); padding:12px; /* An A4 page is ~800px of measure at this type size, which is also where the document's own layout stops growing. Past that the page is centred rather than stretched, so a wide screen gives margins, not longer lines. */ max-width:880px; margin:0 auto; /* Clip the frame's square corners to the page's radius. */ overflow:hidden; } .pv-frame{ display:block; width:100%; border:0; background:transparent; /* The document paints its own white ground over the whole frame. Rounding the frame stops that ground meeting the page's warm paper in four hard square corners inside a rounded page. */ border-radius:var(--r-sm); /* An A4 page letterboxed into a strip is unreadable, which is exactly the complaint this panel exists to answer. Give it real height and let it scroll inside itself — scrolling the document then never moves the Send button. */ height:46dvh; min-height:260px; } @media (min-width:820px){ .pv-doc{ padding:20px; } .pv-page{ padding:24px 26px; } /* Taller than the old 58vh: the card is 88vh and the rail beside it is short, so the space was there and the document was not using it. */ .pv-frame{ height:clamp(420px, 62vh, 820px); } } /* The loading line and the honest failure message. They stand where the page stands, so the panel never opens on a bare coloured slab. */ .pv-doc-msg{ background:var(--paper); border:1px solid var(--stroke-soft); border-radius:var(--r-md); box-shadow:var(--shadow); max-width:880px; margin:0 auto; padding:22px 20px; font-size:13.5px; color:var(--ink-soft); line-height:1.6; } .pv-doc-msg b{ color:var(--ink); } .pv-doc-msg code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; background:var(--bone-2); border-radius:6px; padding:1px 5px; } /* ---------- the send rail ---------- */ .pv-rail{ min-width:0; display:flex; flex-direction:column; gap:12px; } @media (min-width:820px){ /* The modal card is the scroll container; sticking the rail to its top keeps Send in view no matter how long the sidebar copy gets. */ .pv-rail{ position:sticky; top:0; } } .pv-block{ border:1px solid var(--stroke-soft); border-radius:var(--r-md); background:var(--bone); padding:11px 13px; min-width:0; } .pv-k{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:4px; } .pv-v{ font-size:14px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; } .pv-v-sub{ font-size:13px; color:var(--ink-soft); overflow-wrap:anywhere; margin-top:2px; } .pv-amount{ font-family:var(--disp); font-size:22px; font-weight:800; color:var(--gold-deep); } .pv-subject{ font-size:13.5px; color:var(--ink); line-height:1.5; overflow-wrap:anywhere; } /* .hint has no bare rule anywhere in the app — it is always scoped by its container, as in styles.css `.panel-title .hint`. Scope it here the same way so it reads as a note beside the subject, not as body copy. */ .pv-block .hint{ font-size:12px; color:var(--ink-faint); margin-top:5px; } /* ---------- actions ---------- */ .pv-act{ display:flex; flex-direction:column; gap:8px; } /* .btn is inline-ish by default; the rail mixes