/* ============================================================================ THE SEND MODAL AND ITS DATE FIELD — one component, both rentals pages. ⚠️ THIS FILE EXISTS BECAUSE THE SEND FORM WAS BROKEN ON /rentals FOR AS LONG AS IT HAD BEEN THERE, AND NOTHING SAID SO. Every rule below lived in design.css, which /rentals/design loads and /rentals does not. The control panel put a Send button on the browse page in "The control panel matches the lab that designed it"; the button worked, openSendForm() built the dialog, and the dialog arrived with NO STYLING AT ALL — 26 classes, the whole modal and the whole calendar. `.sendveil` and `.sendbox` are what make it a floating dialog, so without them the form rendered inline at the foot of the document and the browser scrolled to it. Darrell, 2026-09-02: "it navigates to the bottom of the page, displaying an amazingly plain form ... I don't want to lose them and push them to a whole other page." ⚠️ THE SAME SPLIT panel.css ALREADY MADE, FOR THE SAME REASON. That file's header: "One component, both rentals pages." A shared component's stylesheet cannot live in a file only one of its pages loads. When the event dock became the control panel it was moved out; the send modal was left behind, and it is the only other thing on the canvas that both pages use. ⚠️ SO THE RULE THIS WRITES DOWN: if a component is reachable from /rentals AND /rentals/design, its CSS goes in a file both of them load — this one, panel.css, or rentals.css. design.css is the CANVAS's stylesheet and nothing the browse page can reach may depend on it. Namespaces here: `send*` (the dialog) and `dp*` (the date field and its calendar, from datepick.js). Both verified free across every other stylesheet, and neither appears on any page outside the two rentals ones. Loaded immediately before panel.css on both pages, which stays last. ============================================================================ */ /* ---------- send your designs ---------- * Two steps, because Goodshuffle requires name and date and everything else * is genuinely optional. The optional step looks skippable on purpose: a form * that presents six fields as one wall reads as six required fields. */ #sendwrap:empty { display: none; } .sendveil { position: fixed; inset: 0; z-index: 300; background: rgba(29, 29, 27, .45); backdrop-filter: blur(2px); animation: veilin .22s var(--ease-out); } @keyframes veilin { from { opacity: 0; } to { opacity: 1; } } .sendbox { position: fixed; z-index: 301; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); overflow-y: auto; background: var(--paper); border: 1px solid var(--rule-line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(15, 15, 14, .28); padding: 1.5rem 1.5rem 1.2rem; animation: boxin .26s var(--ease-out); } @keyframes boxin { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } } @media (prefers-reduced-motion: reduce) { .sendveil, .sendbox { animation: none; } } .sendbox h2 { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; line-height: 1.15; } .sendsub { font-family: var(--text); font-size: .95rem; color: var(--muted); margin: .35rem 0 1.1rem; } .sendx { position: absolute; right: .7rem; top: .6rem; width: 30px; height: 30px; border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 50%; } .sendx:hover, .sendx:focus-visible { background: var(--ground); color: var(--ink); } .sendrow { display: block; margin-bottom: .8rem; } .sendrow.two { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .sendrow.three { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .7rem; } /* 11px floor and rem sizing, Layer 1 rule 11. */ .sendbox label { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .sendbox input, .sendbox textarea { display: block; width: 100%; margin-top: .25rem; font-family: var(--text); font-size: 1rem; color: var(--ink); background: var(--ground); border: 1px solid var(--rule-line); border-radius: var(--radius-sm); padding: .5rem .6rem; transition: border-color .15s; } .sendbox input:hover, .sendbox textarea:hover { border-color: var(--amber); } .sendbox input:focus-visible, .sendbox textarea:focus-visible { outline: none; border-color: var(--amber-deep); } .sendbox textarea { resize: vertical; } /* ---------- the checkbox ---------- * ⚠️ ONLY THE BOX IS A CLICK TARGET. Darrell found the whole row toggling * when he meant to click the box, so the sentence is no longer a