/* THE CLEAN DOCUMENT.
 *
 * Evan, 18 September 2026, looking at the purchase order: "use this same style
 * for our proposal and estimate template, I like how clean it is, the other
 * one looks too puffy with small text."
 *
 * He was right, and it was measurable: table text at 12.2px sitting in 13px of
 * padding, inside bordered boxes, under a solid blue band. On paper the print
 * layer then shrank that text to 9.6px. More air than words.
 *
 * This is the PO's setting applied to the same document: white masthead, the
 * mark with no plate, a big blue title on the right, one blue rule, sans-serif
 * at one size throughout, no boxes, totals as a right-hand column.
 *
 * IT IS ONLY A SKIN. The markup, the numbers, the page-break rules in mac.css
 * and the Word export are untouched. It applies when #paper has .doc-clean
 * (View menu, "Clean document style"); take the class off and the classic
 * document is exactly as it was. Loaded last, and every selector starts with
 * `body .paper.doc-clean` so it outranks the theme overrides in styles.css.
 */
body .paper.doc-clean{ --dc-blue:#1f5fbf; --dc-ink:#16181d; --dc-dim:#5a6272; --dc-rule:#cfd5df;
  --doc-block:26px; --doc-gap:28px; background:#e9ecf1 }
body .paper.doc-clean .sheet{ font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; line-height:1.45;
  letter-spacing:0; color:var(--dc-ink); border:0; border-radius:0; box-shadow:0 2px 14px rgba(20,30,50,.12); background:#fff }

/* masthead */
body .paper.doc-clean .sheet-head{ background:#fff; color:var(--dc-ink); padding:34px 40px 0 }
body .paper.doc-clean .sheet-head::after{ display:none }
body .paper.doc-clean .sh-top{ align-items:flex-start; padding-bottom:18px; border-bottom:2.5px solid var(--dc-blue) }
body .paper.doc-clean .sh-brand .sh-logo{ width:220px; padding:0; background:none; border-radius:0; box-shadow:none }
body .paper.doc-clean .sh-co{ font-size:20px; font-weight:700; letter-spacing:0 }
body .paper.doc-clean .sh-meta{ font-size:12.5px; line-height:1.45; color:#333; opacity:1; margin-top:10px }
body .paper.doc-clean .sh-tag{ font-size:14px; line-height:1.4; color:var(--dc-dim); opacity:1 }
body .paper.doc-clean .sh-tag br{ display:none }
body .paper.doc-clean .sh-tag .sh-date, body .paper.doc-clean .sh-tag .sh-no{ display:block }
body .paper.doc-clean .sh-tag .sh-no{ color:var(--dc-ink); font-weight:700; font-size:15px }
body .paper.doc-clean .sh-pill{ display:block; background:none; border:0; border-radius:0; padding:0; margin:0 0 6px;
  color:var(--dc-blue); font-size:27px; font-weight:700; letter-spacing:.06em; line-height:1 }
body .paper.doc-clean .sh-subject{ margin:18px 0 0; font-size:17px; font-weight:700; line-height:1.3; color:var(--dc-ink) }

body .paper.doc-clean .sheet-body{ padding:22px 40px 40px }

/* who it is for, who it is from: labels and text, no boxes */
body .paper.doc-clean .party{ margin-bottom:22px }
body .paper.doc-clean .party .box{ background:none; border:0; border-radius:0; padding:0; box-shadow:none }
body .paper.doc-clean .party h4, body .paper.doc-clean .term h5, body .paper.doc-clean .options h4{
  margin:0 0 6px; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--dc-blue) }
body .paper.doc-clean .party p{ font-size:14px; line-height:1.45; color:var(--dc-ink) }
body .paper.doc-clean .party b{ font-size:16.5px }
body .paper.doc-clean .intro{ font-size:14px; line-height:1.5; color:var(--dc-ink); margin-bottom:6px }
body .paper.doc-clean .intro p{ margin:0 0 9px }

/* a section: its name and its money on one quiet line, then the table */
body .paper.doc-clean .sec-band{ background:none; color:var(--dc-ink); border-radius:0; padding:0 0 7px;
  font-size:15.5px; font-weight:700; letter-spacing:0; text-transform:none; align-items:baseline }
body .paper.doc-clean .sec-band .amt{ font-family:inherit; font-size:15.5px; font-variant-numeric:tabular-nums }
body .paper.doc-clean table.items{ font-size:14px; border:0; border-radius:0; border-collapse:collapse; overflow:visible }
body .paper.doc-clean table.items th{ background:var(--dc-blue); color:#fff; font-size:10.5px; font-weight:700;
  letter-spacing:.1em; padding:8px 10px; border:0; -webkit-print-color-adjust:exact; print-color-adjust:exact }
body .paper.doc-clean table.items td{ padding:8px 10px; border-bottom:1px solid var(--dc-rule); background:none }
body .paper.doc-clean table.items tr:last-child td{ border-bottom:1px solid var(--dc-rule) }
body .paper.doc-clean table.items tr:nth-child(even) td{ background:none }
body .paper.doc-clean table.items .num{ font-family:inherit; font-variant-numeric:tabular-nums }
body .paper.doc-clean table.items .it{ font-weight:700; color:var(--dc-ink) }
body .paper.doc-clean table.items .ds{ color:#2c323d; line-height:1.4 }
body .paper.doc-clean table.items .dt, body .paper.doc-clean table.items .was{ font-size:12.5px }
body .paper.doc-clean table.items .vend{ font-size:11.5px; color:var(--dc-dim) }
body .paper.doc-clean table.items tr.opt td{ background:none; color:var(--dc-dim) }

/* totals: a right-hand column, the way the PO does it */
body .paper.doc-clean .summary-card{ width:min(400px,100%); margin-left:auto; border:0; border-radius:0; box-shadow:none; overflow:visible }
body .paper.doc-clean .summary-card .sc-row{ background:none; border:0; padding:5px 10px; font-size:14px; color:var(--dc-ink); gap:16px }
body .paper.doc-clean .summary-card .sc-row b{ font-family:inherit; font-variant-numeric:tabular-nums; font-weight:400; color:var(--dc-ink); white-space:nowrap }
body .paper.doc-clean .summary-card .sc-row.total{ background:none; color:var(--dc-ink); font-size:17px; font-weight:700;
  border-top:2px solid var(--dc-ink); margin-top:5px; padding-top:9px }
body .paper.doc-clean .summary-card .sc-row.total b{ color:var(--dc-ink); font-size:19px; font-weight:700 }
body .paper.doc-clean .summary-card .sc-row.pay{ background:none; font-weight:700; color:var(--dc-ink) }
body .paper.doc-clean .summary-card .sc-row.pay b{ font-weight:700 }
body .paper.doc-clean .savings-chip{ display:block; text-align:right; background:none; border:0; border-radius:0; padding:6px 10px 0;
  font-size:13px; font-weight:700; color:#16703a }

/* terms: a heading and a paragraph */
body .paper.doc-clean .terms{ gap:16px }
body .paper.doc-clean .term{ background:none; border:0; border-radius:0; padding:0 }
body .paper.doc-clean .term p{ font-size:13.5px; line-height:1.5; color:#2c323d }

/* options keep their cards, because they are a comparison, but lose the puff */
body .paper.doc-clean .optgrid .opt{ border:1px solid var(--dc-rule); border-radius:0; background:none; box-shadow:none; padding:16px 14px 14px }
body .paper.doc-clean .optgrid .opt.best{ border:2px solid var(--dc-blue); background:none; box-shadow:none }
body .paper.doc-clean .optgrid .opt .ribbon{ background:var(--dc-blue); border-radius:0; font-size:10.5px; letter-spacing:.1em }
body .paper.doc-clean .optgrid .opt .optprice{ font:700 24px "Helvetica Neue",Helvetica,Arial,sans-serif; color:var(--dc-blue); letter-spacing:0 }

/* signatures: a line to sign on */
body .paper.doc-clean .signblock{ gap:40px; margin-top:34px }
body .paper.doc-clean .sigcell, body .paper.doc-clean .sigcell.signed{ background:none; border:0; border-radius:0; padding:0 }
body .paper.doc-clean .sigcell .line{ border-bottom:1.2px solid var(--dc-ink); height:52px; margin-bottom:6px }
body .paper.doc-clean .sigcell .line img{ mix-blend-mode:multiply }
/* padding:0 - an unrelated .who rule elsewhere in the app pads this by 16px 15px */
body .paper.doc-clean .sigcell .who{ padding:0; font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--dc-ink) }
body .paper.doc-clean .sigcell .role, body .paper.doc-clean .sigcell .when{ font-size:12.5px; color:var(--dc-dim) }

@media (max-width:640px){
  body .paper.doc-clean .sheet-head{ padding:22px 18px 0 } body .paper.doc-clean .sheet-body{ padding:18px 18px 30px }
  body .paper.doc-clean .sh-brand .sh-logo{ width:150px } body .paper.doc-clean .sh-pill{ font-size:20px }
}

/* PAPER. The classic print layer shrinks everything to fit (table text 9.6px).
 * This one prints at the PO's size, 10pt, and saves its space by having no
 * boxes and no bands instead of by getting smaller. */
@media print{
  body .paper.doc-clean .sheet{ font-size:10pt; box-shadow:none }
  /* margin:0 - the classic print layer insets the masthead 14px 18px; here it lines up with the body */
  body .paper.doc-clean .sheet-head{ padding:0; margin:0; border-radius:0 }
  body .paper.doc-clean .sheet-body{ padding:5mm 0 0 }
  body .paper.doc-clean .sh-top{ padding-bottom:4.5mm; border-bottom-width:0.6mm }
  body .paper.doc-clean .sh-brand .sh-logo{ width:56mm; padding:0 }
  body .paper.doc-clean .sh-meta{ font-size:9pt; line-height:1.4; margin-top:3mm }
  body .paper.doc-clean .sh-tag{ font-size:10pt; line-height:1.4 }
  body .paper.doc-clean .sh-tag .sh-no{ font-size:11pt }
  body .paper.doc-clean .sh-pill{ font-size:20pt; padding:0; margin-bottom:2mm }
  body .paper.doc-clean .sh-subject{ font-size:12.5pt; margin-top:4.5mm }
  body .paper.doc-clean .party{ margin-bottom:5mm; gap:8mm }
  body .paper.doc-clean .party .box{ padding:0 }
  body .paper.doc-clean .party h4, body .paper.doc-clean .term h5, body .paper.doc-clean .options h4{ font-size:8pt; letter-spacing:.16em; margin-bottom:1.6mm }
  body .paper.doc-clean .party p, body .paper.doc-clean .intro{ font-size:10pt; line-height:1.42 }
  body .paper.doc-clean .party b{ font-size:12pt }
  body .paper.doc-clean .sec-band{ padding:0 0 1.8mm; font-size:11.5pt; border-radius:0; letter-spacing:0 }
  body .paper.doc-clean .sec-band .amt{ font-size:11.5pt }
  body .paper.doc-clean table.items{ font-size:10pt; border-radius:0 }
  body .paper.doc-clean table.items th{ font-size:8pt; padding:2mm 2.4mm; letter-spacing:.1em }
  body .paper.doc-clean table.items td{ padding:1.9mm 2.4mm }
  body .paper.doc-clean table.items .dt, body .paper.doc-clean table.items .was{ font-size:9pt }
  body .paper.doc-clean table.items .vend{ font-size:8.5pt }
  body .paper.doc-clean .summary-card{ width:82mm }
  body .paper.doc-clean .summary-card .sc-row{ font-size:10pt; padding:1.1mm 2.4mm }
  body .paper.doc-clean .summary-card .sc-row.total{ font-size:12pt; padding-top:2mm }
  body .paper.doc-clean .summary-card .sc-row.total b{ font-size:13pt }
  body .paper.doc-clean .term{ padding:0 } body .paper.doc-clean .term p{ font-size:9.5pt; line-height:1.42 }
  body .paper.doc-clean .signblock{ margin-top:9mm; gap:10mm }
  body .paper.doc-clean .sigcell{ padding:0 } body .paper.doc-clean .sigcell .line{ height:13mm }
  body .paper.doc-clean .sigcell .who{ font-size:9.5pt } body .paper.doc-clean .sigcell .role, body .paper.doc-clean .sigcell .when{ font-size:9pt }
}

/* THE ALARM MONITORING PAGE. Appended after the estimate as its own sheet, and
 * set in the PO's style whichever document style the estimate itself is using:
 * these selectors are not under .doc-clean on purpose. See monitoring.js. */
.paper .mon-sheet{ margin-top:26px; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; line-height:1.45;
  color:#16181d; background:#fff; border:0; border-radius:0; box-shadow:0 2px 14px rgba(20,30,50,.12); letter-spacing:0 }
.mon-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin:34px 40px 0; padding-bottom:18px; border-bottom:2.5px solid #1f5fbf }
.mon-logo{ width:220px; height:auto; display:block }
.mon-ttl{ text-align:right; line-height:1.15 }
.mon-ttl b{ display:block; color:#1f5fbf; font-size:25px; letter-spacing:.06em }
.mon-ttl span{ display:block; color:#1f5fbf; font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:3px }
.mon-ttl small{ display:block; color:#5a6272; font-size:14px; margin-top:8px }
.mon-body{ padding:20px 40px 38px }
.mon-lead{ margin:0 0 14px; font-size:15px }
.mon-sep{ border-left:4px solid #1f5fbf; padding:9px 14px; background:#f1f5fb; margin-bottom:20px; -webkit-print-color-adjust:exact; print-color-adjust:exact }
.mon-two{ display:grid; grid-template-columns:1fr 230px; gap:28px; align-items:center; margin-bottom:22px }
.mon-sheet h4{ margin:0 0 6px; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#1f5fbf }
.mon-sheet ul{ margin:0 0 14px; padding-left:18px } .mon-sheet ul:last-child{ margin-bottom:0 } .mon-sheet li{ margin:2px 0 }
.mon-price{ text-align:center; border:2px solid #1f5fbf; padding:18px 10px }
.mon-price b{ display:block; font-size:38px; line-height:1; color:#16181d }
.mon-price span{ display:block; font-size:15px; font-weight:700; margin-top:6px }
.mon-price small{ display:block; font-size:10.5px; letter-spacing:.16em; color:#5a6272; margin-top:4px }
.mon-bill{ display:grid; grid-template-columns:1fr 330px; gap:28px; align-items:start; padding:16px 0; border-top:1px solid #cfd5df; break-inside:avoid; page-break-inside:avoid }
.mon-bill p{ margin:0 0 3px } .mon-dim{ color:#5a6272 }
.mon-math{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
.mon-math td{ padding:3px 0 } .mon-math td:last-child{ text-align:right; white-space:nowrap; padding-left:14px }
.mon-math .g td{ font-weight:700; font-size:16px; border-top:2px solid #16181d; padding-top:7px }
.mon-foot{ margin:18px 0 0; padding-top:12px; border-top:1px solid #cfd5df; color:#5a6272; font-size:12.5px }
.mon-row{ display:flex; gap:8px; align-items:center; margin:12px 0 14px; font-size:15px } .mon-row input{ width:20px; height:20px }
@media (max-width:640px){ .mon-head{ margin:22px 18px 0 } .mon-body{ padding:18px 18px 30px } .mon-logo{ width:150px }
  .mon-two,.mon-bill{ grid-template-columns:1fr; gap:12px } }
@media print{
  .paper .mon-sheet{ break-before:page; page-break-before:always; margin-top:0!important; font-size:10.5pt; box-shadow:none }
  .mon-head{ margin:0; padding-bottom:4.5mm; border-bottom-width:0.6mm } .mon-logo{ width:56mm }
  .mon-ttl b{ font-size:19pt } .mon-ttl span{ font-size:11pt } .mon-ttl small{ font-size:10pt }
  .mon-body{ padding:5mm 0 0 } .mon-lead{ font-size:11pt } .mon-sheet h4{ font-size:8pt }
  .mon-two{ grid-template-columns:1fr 58mm } .mon-bill{ grid-template-columns:1fr 82mm }
  .mon-price b{ font-size:28pt } .mon-math .g td{ font-size:12pt } .mon-foot{ font-size:9pt }
}
.mon-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px } .mon-grid label{ display:block; font-size:12px; opacity:.75; margin-bottom:4px } .mon-grid .f{ width:100% }
@media (max-width:640px){ .mon-grid{ grid-template-columns:1fr } }