/* ECR Connect — the Calendar screen and "Schedule this ride" (2026-10-03). ECR's site only;
   Sam's site never loads this. The mockups Thomas approved: the week grid in the middle, the
   ride open on the right, the dialog over the page. Builds on ecr-leads.css (.lv-*), which is
   always loaded with it, and on the staff app's :root colour tokens. */

#calApp[hidden] { display: none; }
#calApp { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
  min-height: calc(100vh - 220px); font-size: 14px; }
.cal-main { min-width: 0; padding: 18px 22px 30px; display: flex; flex-direction: column; gap: 12px; }
.cal-arrow { width: 40px; height: 40px; border: 1.5px solid var(--dk-line, var(--border)); background: var(--dk-surface, #fff); color: var(--dk-accent-text, var(--purple)); border-radius: 8px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
/* .lv-head > div is the title column on the Leads screen; this group is not. */
.lv-head > .cal-views { display: inline-flex; flex-direction: row; flex-grow: 0; gap: 0; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 8px; overflow: hidden; }
.cal-views button { min-height: 37px; padding: 0 14px; border: 0; background: var(--dk-surface, #fff); color: var(--dk-ink-2, var(--gray)); font: 700 13.5px Helvetica, Arial, sans-serif; cursor: pointer; }
.cal-views button[aria-pressed="true"] { background: var(--purple); color: #fff; }
.cal-arrow:focus-visible, .cal-views button:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 1px; }

.cal-grid { background: var(--dk-surface, #fff); border: 1px solid var(--dk-line, var(--border)); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.cal-dayhead, .cal-untimed { display: grid; border-bottom: 1px solid var(--dk-line, var(--border)); background: var(--dk-page, var(--bg)); }
.cal-dayname { border: 0; background: none; padding: 9px 8px; font: 700 13px Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); cursor: pointer; text-align: center; }
.cal-dayname:hover { color: var(--dk-accent-text, var(--purple)); }
.cal-dayname.cal-today { color: var(--dk-accent-text, var(--purple)); }
.cal-untimed { background: var(--dk-surface, #fff); }
.cal-untimed-label { font-size: 11px; color: var(--dk-ink-2, var(--gray)); text-align: right; padding: 8px 8px 0 0; }
.cal-untimed-day { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-left: 1px solid var(--dk-line, #e7ecee); min-width: 0; }

.cal-scroll { max-height: calc(100vh - 290px); min-height: 360px; overflow-y: auto; }
.cal-body { display: grid; position: relative; }
.cal-hours { position: relative; }
.cal-hours span { position: absolute; right: 8px; font-size: 11px; color: var(--dk-ink-2, var(--gray)); }
.cal-col { position: relative; border-left: 1px solid var(--dk-line, #e7ecee);
  background-image: repeating-linear-gradient(to bottom, var(--dk-tint, #eef2f3) 0, var(--dk-tint, #eef2f3) 1px, transparent 1px, transparent var(--cal-px, 44px)); }
.cal-col.cal-weekend { background-color: var(--dk-tint, #fafbfb); }
.cal-col.cal-col-today { background-color: var(--dk-tint-accent, #fbfaff); }

/* A ride, and a booking with no ride yet. The four looks are the mockup's. */
.cal-block, .cal-chip { box-sizing: border-box; border: 0; border-radius: 6px; padding: 5px 7px; display: flex; flex-direction: column; gap: 2px;
  overflow: hidden; text-align: left; font: 12.5px/1.25 Helvetica, Arial, sans-serif; cursor: pointer; }
.cal-block { position: absolute; }
.cal-chip { width: 100%; padding: 3px 6px; }
.cal-b-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.cal-b-who { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip .cal-b-title { white-space: nowrap; }
.cal-chip .cal-b-who { display: none; }
.cal-accepted { background: var(--dk-accent-soft, #ece8f6); border-left: 4px solid var(--dk-accent-line, #402a82); color: var(--dk-accent-text-2, #2f1f61); }
.cal-waiting { background: var(--dk-warn-soft, #fdf3dc); border-left: 4px solid var(--dk-warn-line-strong, #a06a00); color: var(--dk-warn-text, #5c4300); }
.cal-declined { background: var(--dk-bad-soft, #fbe9eb); border-left: 4px solid var(--dk-bad-line-strong, #a01f2f); color: var(--dk-bad-text, #7a1020); }
.cal-none { background: var(--dk-tint, #eceff1); border-left: 4px solid var(--dk-line-strong, #46555e); color: var(--dk-ink, #1a1a1a); }
.cal-unscheduled { background: var(--dk-surface, #fff); border: 1.5px dashed var(--dk-bad-line-strong, #a01f2f); color: var(--dk-bad-text, #7a1020); }
.cal-on { box-shadow: 0 0 0 2px var(--dk-accent-line, var(--purple)); }
.cal-block:focus-visible, .cal-chip:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 1px; }

.cal-monthhead { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--dk-page, var(--bg)); border-bottom: 1px solid var(--dk-line, var(--border)); }
.cal-monthhead span { padding: 8px; font-size: 12px; font-weight: 700; color: var(--dk-ink-2, var(--gray)); text-transform: uppercase; letter-spacing: 0.4px; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(104px, auto); }
.cal-cell { border-left: 1px solid var(--dk-line, #e7ecee); border-bottom: 1px solid var(--dk-line, #e7ecee); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-cell:nth-child(7n + 1) { border-left: 0; }
.cal-cell.cal-other { background: var(--dk-tint, #fafbfb); }
.cal-cell-day { align-self: flex-start; border: 0; background: none; padding: 2px 6px; border-radius: 10px; font: 700 12.5px Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); cursor: pointer; }
.cal-cell.cal-other .cal-cell-day { color: var(--dk-ink-2, var(--gray)); font-weight: 400; }
.cal-cell.cal-today .cal-cell-day { background: var(--purple); color: #fff; }
.cal-more { align-self: flex-start; border: 0; background: none; color: var(--dk-accent-text, var(--purple)); font: 700 12px Helvetica, Arial, sans-serif; cursor: pointer; padding: 0 4px; }

.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); }
.cal-legend span { display: flex; align-items: center; gap: 6px; }
.cal-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; box-sizing: border-box; padding: 0; }

/* The ride, on the right. IT FLIES OUT OVER THE CALENDAR, as a lead does (Thomas, 2026-10-06,
   on the Reschedule form squeezed into the old 380px column: "What about having it expand out
   like what you did for clicking on a lead"). The calendar keeps the whole width behind it. */
.cal-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); max-height: none; overflow-y: auto;
  z-index: 50; box-shadow: -10px 0 30px rgba(15,61,92,0.18); animation: lvFlyOut 0.18s ease-out; }
.cal-panel.lv-panel-idle { display: none; }
.cal-panel .lv-p-head { position: sticky; top: -20px; margin-top: -20px; padding: 20px 0 8px; background: var(--dk-surface, #fff); z-index: 2; }
@media (prefers-reduced-motion: reduce) { .cal-panel { animation: none; } }
.cal-p-title { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-p-title h2 { margin: 0; font: 800 22px Raleway, Helvetica, Arial, sans-serif; overflow-wrap: anywhere; }
.cal-price { font-weight: 700; color: var(--dk-accent-text, var(--purple)); }
.cal-invitee { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.cal-invitee > span:first-child { flex-grow: 1; overflow-wrap: anywhere; }
.cal-resp { font-size: 12px; font-weight: 700; border-radius: 10px; padding: 3px 9px; white-space: nowrap; }
.cal-resp-yes { color: var(--dk-good-text, #155d2c); background: var(--dk-good-soft, #e3f3e8); }
.cal-resp-wait { color: var(--dk-warn-text, #7a4f00); background: var(--dk-warn-soft, #fdf3dc); }
.cal-resp-no { color: var(--dk-bad-text, #7a1020); background: var(--dk-bad-soft, #fbe9eb); }
.cal-edit { display: flex; flex-direction: column; gap: 8px; }
.cal-edit select, .cal-edit input, .cal-dialog select, .cal-dialog input[type="date"], .cal-dialog input[type="time"] {
  height: 40px; padding: 0 8px; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 8px; font: 14px Helvetica, Arial, sans-serif; background: var(--dk-surface, #fff); min-width: 0; }
.cal-when { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; }
.cal-invite a { color: var(--dk-accent-text, var(--purple)); }
.cal-route { margin-top: 12px; }
.cal-invite a.cal-route-btn { display: inline-block; background: var(--purple); color: #fff; text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 6px; }
.cal-to { font-size: 12px; color: var(--dk-ink-2, var(--gray)); }
/* Reschedule: each field under its own label, never squeezed into one row (2026-10-06). */
.cal-move { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cal-move input { height: 44px; margin: 0; width: 100%; box-sizing: border-box; }
.cal-move label { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--dk-ink-2, var(--gray)); min-width: 0; }
@media (max-width: 480px) { .cal-move { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cal-move label:first-child { grid-column: 1 / -1; } }
.cal-dialog .cal-when { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.cal-note { margin: 0; font-size: 13px; color: var(--dk-ink-2, var(--gray)); background: var(--dk-page, var(--bg)); border-radius: 8px; padding: 8px 10px; }
.cal-line { margin: 0; font-size: 13.5px; }
.cal-ok { margin: 0; font-size: 13.5px; color: var(--dk-good-text, #155d2c); background: var(--dk-good-soft, #e3f3e8); border-radius: 8px; padding: 8px 10px; }

/* "Schedule this ride" */
.cal-overlay { position: fixed; inset: 0; background: rgba(20, 16, 40, 0.45); z-index: 200; overflow-y: auto; display: flex; justify-content: center;
  align-items: flex-start; padding: 28px 16px; }
.cal-dialog { width: 680px; max-width: 100%; box-sizing: border-box; background: var(--dk-surface, #fff); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.25);
  padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.cal-dialog h2 { margin: 0; font: 800 22px Raleway, Helvetica, Arial, sans-serif; }
.cal-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
/* The staff app's global label rule spaces its form (margin-top: 14px except on a first
   child); here the dialog's own gaps do that, so every field starts level. */
.cal-field { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: var(--dk-ink-2, var(--gray)); }
.cal-field > select, .cal-field > span > select { width: 100%; }
.cal-input { height: 44px; box-sizing: border-box; padding: 0 10px; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 8px; font: 14px Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); }
/* A placeholder readable in both appearances (2026-10-09 review): the browser's own grey was 2.43:1
   on a dark field. The secondary text colour, as every hint here, and at full strength. */
.cal-input::placeholder { color: var(--dk-ink-2, var(--gray)); opacity: 1; }
.cal-input[readonly] { background: var(--dk-page, var(--bg)); color: var(--dk-ink-2, var(--gray)); border-color: var(--dk-line, #e7ecee); }
.cal-input:focus, .cal-dialog select:focus, .cal-dialog input:focus { outline: none; border-color: var(--dk-accent-line, var(--purple)); }
.cal-hint { font-weight: 400; font-size: 12px; }
.cal-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
.cal-add[hidden] { display: none; }
.cal-add input { height: 40px; padding: 0 10px; border: 1.5px solid var(--dk-line, var(--border)); border-radius: 8px; font: 14px Helvetica, Arial, sans-serif; }
.cal-add .lv-err { grid-column: 1 / -1; }
.cal-also { border: 1px solid var(--dk-line, var(--border)); border-radius: 10px; padding: 10px 14px 12px; margin: 0; }
.cal-also legend { font-size: 13px; font-weight: 700; color: var(--dk-ink-2, var(--gray)); padding: 0 6px; }
.cal-also label { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0; font-size: 14px; font-weight: 400; color: var(--dk-ink, #1a1a1a); }
/* Tick boxes and radios only: the QuickBooks price box is a text input inside the same kind of
   fieldset, and a bare `input` here drew it 18px wide (Cowork's QA pass, 2026-10-04). */
.cal-also input[type="checkbox"], .cal-also input[type="radio"] { width: 18px; height: 18px; accent-color: var(--purple); }
.cal-invite { border: 1px solid var(--dk-line, #e7ecee); background: var(--dk-tint-accent, #faf9fd); border-radius: 10px; padding: 12px 14px; font-weight: 400; font-size: 13.5px; line-height: 1.55; color: var(--dk-ink, #1a1a1a); }
.cal-invite .cal-gap { height: 10px; }
.cal-actions { display: flex; align-items: center; gap: 12px; }
.cal-foot { flex-grow: 1; font-size: 12.5px; color: var(--dk-ink-2, var(--gray)); }
.cal-actions .lv-btn { min-height: 44px; padding: 0 18px; }

/* "Email the client a confirmation": the form, and the email as it will arrive */
.cal-dialog-wide { width: 1100px; }
.cal-conf { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
.cal-conf-form { display: flex; flex-direction: column; gap: 14px; }
.cal-conf-form .cal-also label { min-height: 30px; }
.cal-conf-mail { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cal-subject { font-size: 13px; color: var(--dk-ink-2, var(--gray)); }
.cal-subject b { color: var(--dk-ink, #1a1a1a); }
.cal-preview { width: 100%; height: 640px; border: 1px solid var(--dk-line, var(--border)); border-radius: 10px; background: var(--dk-tint-accent, #f4f2fa); }
.cal-confirm { border: 1px solid var(--dk-line, var(--border)); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.cal-confirm h3 { margin: 0; font: 700 12.5px Raleway, Helvetica, Arial, sans-serif; letter-spacing: 0.5px; text-transform: uppercase; color: var(--dk-accent-text, var(--purple)); }

@media (max-width: 900px) { .cal-conf { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .cal-fields, .cal-add { grid-template-columns: minmax(0, 1fr); } .cal-actions { flex-wrap: wrap; } }

/* The QuickBooks invoice in the confirmation dialog (2026-10-04). */
.cal-qbo .cal-hint { margin: 0 0 6px; color: var(--dk-ink-2, var(--gray)); }
.cal-qbo-new { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cal-qbo-new[hidden] { display: none; }
.cal-qbo-new .lv-btn { align-self: flex-start; }
.cal-qbo-new .cal-field { flex-direction: column; align-items: stretch; gap: 6px; font-size: 13px; font-weight: 700; color: var(--dk-ink-2, var(--gray)); }
.cal-qbo-new .cal-input { width: 160px; max-width: 100%; }
.cal-qbo a.lv-btn { display: inline-block; text-decoration: none; margin-top: 4px; }
.cal-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--dk-accent-text, var(--purple)); text-decoration: underline; cursor: pointer; }

/* The Discount box on a new invoice (#400): $ or %, beside each other. */
.cal-qbo-off-row { display: flex; gap: 6px; }
.cal-qbo-off-row select.cal-input { width: 64px; }
.cal-qbo-off-row input.cal-input { width: 120px; max-width: 100%; }
#calFuOwnMessage { min-height: 160px; height: auto; resize: vertical; padding: 8px 10px; font: 400 14px Helvetica, Arial, sans-serif; line-height: 1.45; }
/* A chauffeur whose county ID or insurance has run out (2026-10-06): said, never refused. */
.cal-hint.cal-lapsed { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--dk-warn-text, #7a4f00); }
.cal-hint.cal-lapsed:empty, .cal-hint.cal-lapsed[hidden] { display: none; }

/* The List and Payouts (2026-10-07, the approved mockup
   https://claude.ai/artifact/UBkjcV8DbuQLe5dLY4bWSu). Tables in place of the grid; Payouts is the
   owner's only and has no ride panel. */
.cal-tableview .cal-grid { display: flex; flex-direction: column; gap: 12px; overflow: visible; border: 0; background: transparent; }
.cal-tableview .cal-legend { display: none; }
.cal-payview .cal-panel { display: none; }
.cal-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-chips button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--dk-line, var(--border)); background: var(--dk-surface, #fff);
  color: var(--dk-ink, #1a1a1a); font: 700 12.5px Helvetica, Arial, sans-serif; cursor: pointer; }
.cal-chips button[aria-pressed="true"] { background: var(--dk-accent-soft, var(--purple-light)); border-color: var(--dk-accent-line, var(--purple)); color: var(--dk-accent-text, var(--purple)); }
.cal-chips em { font-style: normal; font-weight: 400; margin-left: 5px; color: var(--dk-ink-2, #46555e); }
.cal-ltable-wrap { overflow-x: auto; background: var(--dk-surface, #fff); border: 1px solid var(--dk-line, var(--border)); border-radius: 12px; }
.cal-ltable { width: 100%; border-collapse: collapse; font-size: 13px; }
.cal-ltable th { text-align: left; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--dk-ink-2, #46555e); font-weight: 700;
  padding: 8px 10px; border-bottom: 1px solid var(--dk-line, var(--border)); white-space: nowrap; }
.cal-ltable td { padding: 9px 10px; border-bottom: 1px solid var(--dk-line, #eceef2); vertical-align: top; color: var(--dk-ink, #1a1a1a); }
.cal-ltable .cal-ln { text-align: right; font-variant-numeric: tabular-nums; }
.cal-ltable tfoot td { font-weight: 700; border-bottom: 0; }
.cal-lday td { background: var(--dk-page, #eef0f3); font-weight: 700; font-size: 12.5px; padding: 6px 10px; }
.cal-lrow, .cal-prow[tabindex] { cursor: pointer; }
.cal-lrow:hover td, .cal-lrow.cal-on td, .cal-prow[tabindex]:hover td, .cal-prow.cal-open td { background: var(--dk-accent-soft, var(--purple-light)); }
.cal-lrow:focus-visible, .cal-prow:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: -3px; }
.cal-lrow-unsched td { border-top: 1.5px dashed var(--dk-line, var(--border)); border-bottom: 1.5px dashed var(--dk-line, var(--border)); }
.cal-ltime { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-lsub { display: block; font-size: 12px; color: var(--dk-ink-2, #46555e); }
.cal-l-first { margin-left: 6px; }
.cal-lsched { min-height: 28px; margin-left: 6px; font-size: 12px; }
.cal-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--dk-accent-text, var(--purple)); cursor: pointer; text-align: left; }
.cal-linkbtn:hover { text-decoration: underline; }
.cal-pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.cal-pill-good { color: var(--dk-good-text, #155d2c); background: var(--dk-good-soft, #e3f3e8); }
.cal-pill-warn { color: var(--dk-warn-text, #7a4f00); background: var(--dk-warn-soft, #fdf3dc); }
.cal-pill-bad { color: var(--dk-bad-text, #7a1020); background: var(--dk-bad-soft, #fbe9eb); }
.cal-pill-off { color: var(--dk-ink-2, #46555e); background: var(--dk-page, #eef0f3); }
.cal-ptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cal-ptile { background: var(--dk-surface, #fff); border: 1px solid var(--dk-line, var(--border)); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.cal-pk { font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--dk-ink-2, #46555e); font-weight: 700; }
.cal-pv { font: 800 24px Raleway, Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); font-variant-numeric: tabular-nums; }
.cal-ps { font-size: 12.5px; color: var(--dk-ink-2, #46555e); }
.cal-pconfirm { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cal-pconfirm .lv-btn, .cal-prow .lv-btn { min-height: 30px; font-size: 12.5px; }
.cal-chev::before { content: "\25B8\00a0"; color: var(--dk-ink-2, #46555e); }
.cal-open .cal-chev::before { content: "\25BE\00a0"; }
.cal-pdetail > td { padding: 0 10px 12px 28px; background: var(--dk-surface, #fff); }
.cal-pinner { font-size: 12.5px; }
.cal-warn-text { color: var(--dk-warn-text, #7a4f00); font-weight: 700; }
.cal-note-bad { color: var(--dk-bad-text, #7a1020); background: var(--dk-bad-soft, #fbe9eb); }
@media (max-width: 900px) { .cal-ptiles { grid-template-columns: minmax(0, 1fr); } }
/* The pickup day asked for in the confirmation when the quote has none (#403, 2026-10-08). */
.cal-when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }

/* THE INVOICE PREVIEW FLIES OUT, drawn like Thomas's own invoice (2026-10-09). Over the confirmation
   dialog, from the right, as a lead does. The sheet is paper: white in both appearances, as the
   invoice the client gets is (its dark values are its light ones, in index.html). */
.cal-inv-scrim { position: fixed; inset: 0; background: rgba(20, 16, 40, 0.35); z-index: 1; }
.cal-inv-fly { position: fixed; top: 0; right: 0; bottom: 0; width: min(880px, 100%); z-index: 2; display: flex; flex-direction: column;
  background: var(--dk-surface, #fff); border-left: 1px solid var(--dk-line, var(--border)); box-shadow: -10px 0 30px rgba(15,61,92,0.22);
  animation: lvFlyOut 0.18s ease-out; outline: none; }
.cal-inv-scrim[hidden], .cal-inv-fly[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cal-inv-fly { animation: none; } }
.cal-inv-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px 12px; border-bottom: 1px solid var(--dk-line, var(--border)); }
.cal-inv-head .cal-p-title { flex: 1; min-width: 0; }
.cal-inv-head h2 { margin: 0; font: 800 20px Raleway, Helvetica, Arial, sans-serif; }
.cal-inv-body { flex: 1; overflow: auto; padding: 18px 20px; background: var(--dk-page, var(--bg)); }
.cal-inv-foot { padding: 12px 20px; border-top: 1px solid var(--dk-line, var(--border)); background: var(--dk-surface, #fff); }
.cal-inv-foot .cal-actions { justify-content: flex-start; flex-wrap: wrap; }
.cal-inv-foot .lv-err:empty { display: none; }
.cal-grow { flex: 1; }
.qb-drawn { margin: 10px auto 0; max-width: 820px; text-align: center; }
.qb-sheet { background: var(--dk-paper, #ffffff); color: var(--dk-paper-ink, #1f2328); max-width: 820px; margin: 0 auto; border: 1px solid var(--dk-paper-line, #dfe3e8);
  border-radius: 4px; box-shadow: 0 2px 8px rgba(15,61,92,0.10); font: 13px/1.5 Helvetica, Arial, sans-serif; overflow: hidden; }
.qb-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto; gap: 16px; padding: 28px 28px 22px; align-items: start; }
.qb-kind { font: 700 22px Helvetica, Arial, sans-serif; letter-spacing: 0.08em; color: var(--dk-paper-head, #3d4a54); margin-bottom: 2px; }
.qb-co b { display: block; }
.qb-contact { padding-top: 30px; overflow-wrap: anywhere; }
.qb-logo { width: 150px; height: auto; display: block; }
.qb-band { background: var(--dk-paper-band, #f0f1f3); padding: 20px 28px; display: grid; gap: 16px; }
.qb-lbl { display: block; font-size: 12px; margin-bottom: 2px; }
.qb-lbl2 { display: block; font-size: 14px; margin-bottom: 2px; }
.qb-billto { font-size: 14.5px; line-height: 1.55; padding-bottom: 16px; border-bottom: 1px dashed var(--dk-paper-line, #cfd4da); }
.qb-billto .qb-sub { font-size: 13px; color: var(--dk-paper-muted, #55636c); }
.qb-details { font-size: 14.5px; line-height: 1.6; }
.qb-tag { margin-left: 8px; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; background: var(--dk-paper-ok, #e6f4ec); color: var(--dk-paper-ok-ink, #1f6b3d); vertical-align: 1px; }
.qb-tablewrap { overflow-x: auto; padding: 12px 18px 0; }
.qb-lines { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.qb-lines th { text-align: left; font-weight: 400; font-size: 14px; padding: 10px 8px; border-bottom: 1px solid var(--dk-paper-line, #dfe3e8); white-space: nowrap; }
.qb-lines td { padding: 12px 8px 6px; vertical-align: top; }
.qb-lines tbody tr:last-child td { padding-bottom: 14px; border-bottom: 1px solid var(--dk-paper-line, #dfe3e8); }
.qb-lines .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qb-lines .qb-prod { font-weight: 700; }
.qb-lines .qb-text td { padding-top: 0; white-space: pre-line; color: var(--dk-paper-muted, #3f4a52); }
.qb-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 24px; padding: 14px 28px 28px; }
.qb-note h3 { margin: 6px 0 4px; font: 400 17px Helvetica, Arial, sans-serif; }
.qb-note p { margin: 0; white-space: pre-line; font-size: 13px; }
.qb-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.qb-totals .qb-total { border-bottom: 1px solid var(--dk-paper-line, #dfe3e8); padding: 8px 0 12px; font-size: 13px; }
.qb-totals .qb-total span:last-child { font-size: 21px; font-weight: 700; }
@media (max-width: 640px) {
  .qb-top { grid-template-columns: minmax(0, 1fr) auto; }
  .qb-contact { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .qb-logo { width: 110px; }
  .qb-foot { grid-template-columns: minmax(0, 1fr); }
}
/* Hidden means hidden in the dialogs: the estimate mode steps the email parts aside, and a
   display rule on a field, a button or the email column must not keep one on screen. */
.cal-dialog [hidden] { display: none !important; }