/* Document maker. The tool's chrome uses the site tokens (colors measured for AA on
   --ground #F5EAD0, --band #EEDFBE, --card #FCF7EA). The document itself is neutral
   near-black on white so it suits any business. Printing shows the document only:
   #dm-print is a copy the script keeps in step with the preview. */
main [hidden]{display:none!important}
.dm-sec{padding:72px 0}
.dm-head{margin-bottom:2rem}
/* The site-wide ring is --honey2, under 3:1 on these light grounds; honey-ink clears it. */
.dm-sec :focus-visible{outline-color:var(--honey-ink)}

.dm-app{display:grid;gap:36px;align-items:start}
@media (min-width:1020px){.dm-app{grid-template-columns:minmax(0,430px) minmax(0,1fr)}}
.dm-form,.dm-side{min-width:0}

/* document type + letter style pickers */
.dm-types,.dm-style{border:0;padding:0;margin:0 0 22px;min-width:0}
.dm-style{margin-bottom:16px}
.dm-types>legend,.dm-style>legend{font-family:var(--body);font-size:14px;font-weight:700;color:var(--text);margin:0 0 10px;padding:0}
.dm-seg{display:flex;flex-wrap:wrap;gap:8px}
.dm-seg label{position:relative;display:inline-flex}
.dm-seg input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.dm-seg span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:2px solid #7A6650;
  border-radius:999px;background:var(--card);color:var(--text);font-size:15px;font-weight:700;line-height:1.2}
.dm-seg label:hover span{border-color:var(--text)}
.dm-seg input:checked+span{background:var(--text);border-color:var(--text);color:var(--card)}
.dm-seg input:focus-visible+span{outline:3px solid var(--honey-ink);outline-offset:2px}

/* form boxes and fields. #7A6650 borders measure 5.1:1 on --card, 4.6:1 on --ground. */
.dm-box{border:1px solid #35281B2e;border-radius:6px;background:var(--card);padding:12px 18px 6px;margin:0 0 20px;min-width:0}
.dm-box>legend{font-family:var(--disp);font-size:22px;line-height:1.3;color:var(--text);padding:0 6px;margin-left:-6px}
.dm-field{display:block;margin:0 0 14px;min-width:0}
.dm-lab{display:block;font-size:14px;font-weight:700;line-height:1.35;color:var(--text);margin:0 0 5px}
.dm-form input[type=text],.dm-form input[type=tel],.dm-form input[type=email],.dm-form input[type=date],
.dm-form select,.dm-form textarea{display:block;width:100%;min-width:0;min-height:44px;font-family:var(--body);font-size:16px;
  line-height:1.4;color:var(--text);background:#fff;border:1px solid #7A6650;border-radius:4px;padding:9px 11px}
.dm-form textarea{resize:vertical;min-height:84px}
.dm-form ::placeholder{color:#6B5B47;opacity:1}
.dm-form [aria-invalid=true]{border-color:#9B2D1B;box-shadow:inset 0 0 0 1px #9B2D1B}
.dm-hint{font-size:14px;line-height:1.5;color:var(--text-soft);margin:-6px 0 14px}
.dm-hint-top{margin:0 0 12px}
.dm-msg{font-size:14px;font-weight:700;line-height:1.45;color:#9B2D1B;margin:0 0 10px}
.dm-msg:empty{display:none}
.dm-msg-block{margin-top:-6px}
@media (min-width:440px){.dm-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}}
.dm-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--text);margin:0 0 10px;cursor:pointer}
.dm-check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--honey-ink);cursor:pointer}

/* line items and price-list rows */
.dm-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px;padding:14px 0 4px;border-top:1px solid #35281B24}
.dm-item:first-child{border-top:0;padding-top:4px}
.dm-wide,.dm-item-h{grid-column:1/-1}
.dm-item-h{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--honey-ink);margin:0 0 8px}
.dm-item-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:0 0 8px;
  font-size:15px;font-weight:700;color:var(--text)}
.dm-ctl{display:flex;flex-wrap:wrap;gap:4px}
.dm-addrow{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 14px}

/* buttons */
.dm-btn2{display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:700;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.2;min-height:44px;padding:10px 16px;border-radius:3px;
  border:2px solid var(--text);background:transparent;color:var(--text);cursor:pointer;text-decoration:none}
.dm-btn2:hover{background:#35281B14}
.dm-btn2:disabled{opacity:.5;cursor:default;background:transparent}
.dm-quiet{border-color:transparent;text-decoration:underline;text-underline-offset:3px;padding-left:8px;padding-right:8px}
.dm-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}
.dm-filewrap{position:relative;display:inline-flex}
.dm-file{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden}
.dm-file:focus-visible+label{outline:3px solid var(--honey-ink);outline-offset:2px}

.dm-keep{margin:28px 0 0}
.dm-keep h3,.dm-facts h3{font-family:var(--disp);font-weight:400;font-size:23px;line-height:1.3;color:var(--text);margin:0 0 8px}

/* preview column */
.dm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 0 10px}
.dm-bar .dm-hint{margin:0;flex:1 1 220px}
.dm-status{min-height:1.5em;margin:0 0 10px;font-size:15px;font-weight:700;line-height:1.5;color:var(--text)}
.dm-sheet-wrap{background:#fff;border-radius:4px;box-shadow:0 1px 2px #2e1f0e1f,0 16px 44px #2e1f0e24;overflow-x:auto}
@media (min-width:1020px){
  /* the site nav is sticky at the top (about 64px) */
  .dm-side{position:sticky;top:84px}
  .dm-sheet-wrap{max-height:calc(100vh - 210px);min-height:420px;overflow:auto}
}

/* the document: neutral, the business's own */
.dm-doc{font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;font-size:13px;line-height:1.5;
  color:#1c1c1c;background:#fff;padding:44px 48px 48px;overflow-wrap:anywhere;text-align:left}
.dm-doc h3,.dm-doc h4{font-family:inherit;color:#1c1c1c}
.dm-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:18px 28px;margin:0 0 30px}
.dm-top--letter{padding-bottom:16px;border-bottom:1px solid #c8c8c8;margin-bottom:34px}
.dm-biz{display:flex;align-items:flex-start;gap:14px;min-width:0;flex:1 1 220px}
.dm-logo{display:block;flex:none;max-width:132px;max-height:76px;width:auto;height:auto;object-fit:contain}
.dm-biz-text{min-width:0}
.dm-doc .dm-name{font-size:1.4em;font-weight:700;line-height:1.25;margin-bottom:4px}
.dm-addr,.dm-contact{color:#444}
.dm-doc .dm-contact{margin-top:4px}
.dm-head-r{text-align:right;margin-left:auto;min-width:0}
.dm-title{font-size:1.85em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.15}
.dm-meta{display:grid;grid-template-columns:auto auto;justify-content:end;gap:3px 14px;margin:10px 0 0}
.dm-meta div,.dm-memo div{display:contents}
.dm-meta dt{color:#444;text-align:left}
.dm-meta dd{margin:0;font-weight:700;text-align:right}
.dm-doc .dm-label{font-size:.8em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#444;margin-bottom:4px}
.dm-party{margin:0 0 24px}
.dm-items{width:100%;border-collapse:collapse;margin:0 0 14px}
.dm-items th{font-size:.8em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#444;text-align:left;
  padding:6px 8px;border-bottom:1.5px solid #1c1c1c;line-height:1.3;vertical-align:bottom}
.dm-items td{padding:8px;border-bottom:1px solid #d6d6d6;vertical-align:top}
.dm-items th:first-child,.dm-items td:first-child{padding-left:0}
.dm-items th:last-child,.dm-items td:last-child{padding-right:0}
.dm-doc .num{text-align:right;white-space:nowrap}
.dm-items tr{break-inside:avoid;page-break-inside:avoid}
.dm-totals{margin:0 0 0 auto;border-collapse:collapse;min-width:min(100%,250px);break-inside:avoid;page-break-inside:avoid}
.dm-totals th{font-weight:400;text-align:left;padding:4px 18px 4px 0;color:#333}
.dm-totals td{padding:4px 0}
.dm-grand th,.dm-grand td{font-weight:700;font-size:1.12em;color:#1c1c1c;border-top:1.5px solid #1c1c1c;padding-top:8px}
.dm-notes{margin-top:28px;break-inside:avoid;page-break-inside:avoid}
.dm-notes p+p,.dm-body p+p,.dm-intro p+p{margin-top:.85em}
.dm-small{font-size:.9em;color:#444}
.dm-intro{margin:-10px 0 22px;color:#333;max-width:60ch}
.dm-doc .dm-pl-h{font-size:1em;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin:24px 0 6px;
  padding-bottom:4px;border-bottom:1px solid #c8c8c8;break-after:avoid;page-break-after:avoid}
.dm-doc .dm-pl-wrap>.dm-pl-h:first-child{margin-top:0}
.dm-pl{list-style:none;margin:0;padding:0}
.dm-pl li{padding:6px 0;break-inside:avoid;page-break-inside:avoid}
.dm-pl-line{display:flex;align-items:baseline;gap:8px}
.dm-pl-name{font-weight:700}
.dm-pl-dots{flex:1 1 auto;min-width:12px;border-bottom:1px dotted #8a8a8a}
.dm-pl-price{white-space:nowrap;font-weight:700}
.dm-doc .dm-pl-detail{color:#444;font-size:.92em;max-width:78%}
.dm-doc .dm-date,.dm-doc .dm-to{margin-bottom:22px}
.dm-body{max-width:68ch}
.dm-doc .dm-sign{margin-top:56px}
.dm-doc .dm-title--memo{margin:0 0 16px}
.dm-memo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid #c8c8c8}
.dm-memo dt{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.85em;color:#444;padding-top:.1em}
.dm-memo dd{margin:0}
.dm-doc .dm-credit{margin-top:40px;font-size:.78em;color:#595959}
.dm-ph{color:#6b6b6b;font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
.dm-blank .dm-bl{display:block;min-width:200px;min-height:1.9em;border-bottom:1px solid #8a8a8a;color:#444;font-size:.8em}
.dm-blank .dm-items td{height:2.2em}
.dm-blank .dm-totals .num{width:120px}
@media (max-width:560px){
  .dm-doc{font-size:11.5px;padding:22px 16px 26px}
  .dm-items th,.dm-items td{padding:6px 5px}
}

/* "before you send it" notes */
.dm-facts{display:grid;gap:26px 40px;max-width:980px}
@media (min-width:720px){.dm-facts{grid-template-columns:1fr 1fr}}
.dm-facts p{color:var(--text-soft);font-size:16px;max-width:52ch}

/* print: the document and nothing else, on US Letter. The empty margin boxes stop
   Chrome and Edge printing the page address, date and title in the margins. */
@page{size:letter;margin:.5in .55in;@top-left{content:""}@top-center{content:""}@top-right{content:""}@bottom-left{content:""}@bottom-center{content:""}@bottom-right{content:""}}
@media screen{#dm-print{display:none}}
@media print{
  html.dm-js body>*:not(#dm-print){display:none!important}
  html.dm-js,html.dm-js body{background:#fff!important}
  #dm-print{display:block}
  #dm-print .dm-doc{padding:0;font-size:10.5pt}
  .dm-ph,.dm-ph-row,.dm-party--empty{display:none!important}
  .dm-items thead{display:table-header-group}
  /* No JavaScript: print only the blank invoice. */
  html:not(.dm-js) body>:not(main),html:not(.dm-js) main>:not(#dm-work),html:not(.dm-js) #dm-work .hero-field,
  html:not(.dm-js) .dm-head,html:not(.dm-js) .dm-noscript-note{display:none!important}
  html:not(.dm-js) #dm-work{padding:0}
  html:not(.dm-js) #dm-work .wrap{padding:0;max-width:none}
  html:not(.dm-js) .dm-sheet-wrap{box-shadow:none}
  html:not(.dm-js) .dm-blank{padding:0;font-size:10.5pt}
}