/* Client-ready estimate sheet (print / PDF view).
 * Ported from the Apex estimate sheet layout (see estimates/apex-estimate-sample.html) and scoped under .doc.
 * The original sizes everything in rem against a 9.5pt root; here every `Nrem`
 * became calc(N * var(--doc-rem)) with --doc-rem: 9.5pt, which is the exact same
 * size without touching the app's 16px root. */

@page { size: letter; margin: 0.5in; }


.doc {
  --doc-rem: 9.5pt;
  --radius: 10px;
  --text: #1a2020;
  --muted: #5a6361;
  --lines: rgba(13, 17, 17, 0.12);
  font-family: var(--font-body);
  font-size: 9.5pt;
  line-height: 1.45;
  color: var(--text);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  max-width: 7.5in;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--lines);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(13, 17, 17, 0.06), 0 12px 32px rgba(13, 17, 17, 0.08);
  overflow: hidden;
  text-align: left;
}
.doc *, .doc *::before, .doc *::after { box-sizing: border-box; margin: 0; padding: 0; }
.doc .brand-text .company { text-transform: none; }
.doc .terms p + ul { margin-top: calc(0.15 * var(--doc-rem)); }
.doc .party-detail:empty { display: none; }

/* —— Header —— */

.doc .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: calc(1 * var(--doc-rem));
      padding: 0.32in 0.4in 0.24in;
      border-bottom: 2.5px solid var(--gold);
    }

.doc .brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: calc(0.35 * var(--doc-rem));
      max-width: 2.9in;
    }

.doc .brand img {
      width: 148px;
      height: auto;
      display: block;
    }

.doc .brand-text .company {
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: 0.01em;
      font-size: calc(1.28 * var(--doc-rem));
      color: var(--ink);
      line-height: 1.15;
    }

.doc .brand-text .gold-rule {
      display: block;
      width: 100%;
      max-width: calc(11.5 * var(--doc-rem));
      height: 2px;
      background: var(--gold);
      margin: calc(0.28 * var(--doc-rem)) 0 calc(0.22 * var(--doc-rem));
      border: 0;
    }

.doc .brand-text .slogan {
      font-family: var(--font-display);
      font-size: calc(0.82 * var(--doc-rem));
      font-weight: 600;
      color: var(--teal-ink);
      margin-top: calc(0.18 * var(--doc-rem));
      letter-spacing: 0.03em;
    }

.doc .header-contact {
      text-align: right;
      font-size: calc(0.74 * var(--doc-rem));
      color: var(--muted);
      line-height: 1.5;
    }

.doc .header-contact strong {
      display: block;
      color: var(--ink);
      font-weight: 650;
      font-size: calc(0.84 * var(--doc-rem));
    }

.doc .header-contact a {
      color: var(--teal-ink);
      text-decoration: none;
      font-weight: 600;
    }

.doc /* —— Body —— */
    .body {
      padding: 0.24in 0.4in 0.16in;
    }

.doc .eyebrow {
      color: var(--teal-ink);
      font-size: calc(0.66 * var(--doc-rem));
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: calc(0.18 * var(--doc-rem));
    }

.doc h1 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: calc(1.45 * var(--doc-rem));
      letter-spacing: 0.01em;
      color: var(--ink);
      line-height: 1.05;
      margin-bottom: calc(0.12 * var(--doc-rem));
    }

.doc .project-line {
      color: var(--muted);
      font-size: calc(0.88 * var(--doc-rem));
      margin-bottom: calc(0.36 * var(--doc-rem));
    }

.doc .meta {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: calc(0.5 * var(--doc-rem));
      background: var(--paper);
      border: 1px solid var(--lines);
      border-radius: 8px;
      padding: calc(0.36 * var(--doc-rem)) calc(0.48 * var(--doc-rem));
      margin-bottom: calc(0.4 * var(--doc-rem));
    }

.doc .meta dt {
      font-size: calc(0.6 * var(--doc-rem));
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal-ink);
      margin-bottom: calc(0.08 * var(--doc-rem));
    }

.doc .meta dd {
      font-weight: 650;
      color: var(--ink);
      font-size: calc(0.88 * var(--doc-rem));
    }

.doc .parties {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: calc(0.65 * var(--doc-rem));
      margin-bottom: calc(0.42 * var(--doc-rem));
    }

.doc .party-label {
      font-size: calc(0.6 * var(--doc-rem));
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal-ink);
      margin-bottom: calc(0.2 * var(--doc-rem));
    }

.doc .party-name {
      font-weight: 700;
      color: var(--ink);
      font-size: calc(0.94 * var(--doc-rem));
    }

.doc .party-detail {
      color: var(--muted);
      font-size: calc(0.8 * var(--doc-rem));
      margin-top: calc(0.08 * var(--doc-rem));
    }

.doc /* —— Table —— */
    table.items {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: calc(0.3 * var(--doc-rem));
      font-size: calc(0.82 * var(--doc-rem));
    }

.doc table.items thead th {
      text-align: left;
      font-size: calc(0.6 * var(--doc-rem));
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--teal-ink);
      border-bottom: 2px solid var(--ink);
      padding: calc(0.2 * var(--doc-rem)) calc(0.28 * var(--doc-rem));
    }

.doc table.items thead th.num,
.doc table.items tbody td.num {
      text-align: right;
    }

.doc table.items thead th.qty {
      text-align: center;
      width: 13%;
    }

.doc table.items thead th.unit {
      width: 14%;
    }

.doc table.items tbody td {
      padding: calc(0.28 * var(--doc-rem)) calc(0.28 * var(--doc-rem));
      border-bottom: 1px solid var(--lines);
      vertical-align: top;
    }

.doc table.items tbody td.desc {
      color: var(--text);
    }

.doc table.items tbody td.desc .item-title {
      font-weight: 650;
      color: var(--ink);
    }

.doc table.items tbody td.desc .item-note {
      display: block;
      color: var(--muted);
      font-size: calc(0.76 * var(--doc-rem));
      margin-top: calc(0.08 * var(--doc-rem));
      line-height: 1.35;
    }

.doc table.items tbody td.qty {
      text-align: center;
      color: var(--muted);
      white-space: nowrap;
    }

.doc table.items tbody td.unit {
      color: var(--muted);
      white-space: nowrap;
    }

.doc table.items tbody td.num {
      font-variant-numeric: tabular-nums;
      font-weight: 650;
      white-space: nowrap;
      width: 15%;
      color: var(--ink);
    }

.doc /* —— Totals —— */
    .totals {
      display: flex;
      justify-content: flex-end;
      margin-bottom: calc(0.38 * var(--doc-rem));
    }

.doc .totals-box {
      width: 2.7in;
    }

.doc .totals-row {
      display: flex;
      justify-content: space-between;
      padding: calc(0.24 * var(--doc-rem)) 0;
      font-size: calc(0.88 * var(--doc-rem));
      border-bottom: 1px solid var(--lines);
    }

.doc .totals-row.tax-note {
      color: var(--muted);
      font-size: calc(0.76 * var(--doc-rem));
      border-bottom: none;
      padding-top: calc(0.18 * var(--doc-rem));
    }

.doc .totals-row.total {
      border-bottom: none;
      border-top: 2px solid var(--ink);
      margin-top: calc(0.12 * var(--doc-rem));
      padding: calc(0.36 * var(--doc-rem)) 0 calc(0.1 * var(--doc-rem));
      align-items: baseline;
    }

.doc .totals-row.total .label {
      font-family: var(--font-display);
      letter-spacing: 0.02em;
      font-weight: 700;
      font-size: calc(1.02 * var(--doc-rem));
      color: var(--ink);
    }

.doc .totals-row.total .amount {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: calc(1.2 * var(--doc-rem));
      color: var(--teal-ink);
      letter-spacing: 0.01em;
    }

.doc /* —— Included one-liner —— */
    .included-bar {
      background: rgba(66, 209, 193, 0.1);
      border: 1px solid rgba(12, 122, 112, 0.22);
      border-radius: 8px;
      padding: calc(0.32 * var(--doc-rem)) calc(0.45 * var(--doc-rem));
      margin-bottom: calc(0.36 * var(--doc-rem));
      font-size: calc(0.78 * var(--doc-rem));
      color: var(--text);
    }

.doc .included-bar strong {
      color: var(--teal-ink);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-size: calc(0.68 * var(--doc-rem));
      margin-right: calc(0.35 * var(--doc-rem));
    }

.doc /* —— Terms —— */
    .terms {
      background: var(--paper);
      border: 1px solid var(--lines);
      border-radius: 8px;
      padding: calc(0.32 * var(--doc-rem)) calc(0.45 * var(--doc-rem));
      margin-bottom: calc(0.36 * var(--doc-rem));
      font-size: calc(0.76 * var(--doc-rem));
    }

.doc .terms h3 {
      font-size: calc(0.6 * var(--doc-rem));
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal-ink);
      margin-bottom: calc(0.22 * var(--doc-rem));
    }

.doc .terms p {
      color: var(--text);
      margin-bottom: calc(0.22 * var(--doc-rem));
    }

.doc .terms p:last-child { margin-bottom: 0; }

.doc .terms strong { color: var(--ink); }

.doc .terms ul {
      list-style: none;
      padding: 0;
      margin: calc(0.15 * var(--doc-rem)) 0 calc(0.22 * var(--doc-rem));
    }

.doc .terms li {
      position: relative;
      padding-left: calc(0.75 * var(--doc-rem));
      margin-bottom: calc(0.12 * var(--doc-rem));
      color: var(--text);
    }

.doc .terms li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.42em;
      width: calc(0.3 * var(--doc-rem));
      height: calc(0.3 * var(--doc-rem));
      background: var(--gold);
      border-radius: 1px;
    }

.doc /* —— Acceptance —— */
    .accept {
      margin-bottom: calc(0.1 * var(--doc-rem));
    }

.doc .accept h3 {
      font-size: calc(0.6 * var(--doc-rem));
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal-ink);
      margin-bottom: calc(0.28 * var(--doc-rem));
    }

.doc .accept-note {
      font-size: calc(0.74 * var(--doc-rem));
      color: var(--muted);
      margin-bottom: calc(0.35 * var(--doc-rem));
    }

.doc .sig-grid {
      display: grid;
      grid-template-columns: 1.4fr 1.4fr 0.9fr;
      gap: calc(0.65 * var(--doc-rem));
    }

.doc .sig-field label {
      display: block;
      font-size: calc(0.6 * var(--doc-rem));
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: calc(0.3 * var(--doc-rem));
    }

.doc .sig-line {
      border-bottom: 1.5px solid var(--ink);
      height: calc(0.9 * var(--doc-rem));
    }

.doc /* —— Footer —— */
    .footer {
      background: var(--ink);
      color: rgba(246, 243, 236, 0.82);
      padding: 0.2in 0.4in;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: calc(1 * var(--doc-rem));
      font-size: calc(0.72 * var(--doc-rem));
    }

.doc .footer strong {
      color: var(--teal);
      font-weight: 700;
    }

.doc .footer .tagline {
      font-family: var(--font-display);
      letter-spacing: 0.02em;
      color: var(--white);
      font-weight: 600;
      font-size: calc(0.82 * var(--doc-rem));
    }

.doc .footer a {
      color: var(--teal);
      text-decoration: none;
      font-weight: 600;
    }

.doc .footer-meta {
      text-align: right;
      line-height: 1.5;
    }

/* —— Print route chrome (screen only) —— */
.print-stage {
  padding: calc(1.25 * var(--doc-rem)) calc(1 * var(--doc-rem)) calc(calc(2 * var(--doc-rem)) + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
}
.print-stage .doc-wrap { width: 7.5in; max-width: 100%; }
@media screen and (max-width: 760px) {
  /* Phones: show the real page scaled down (JS sets --doc-scale) instead of reflowing it */
  .print-stage { padding: calc(0.75 * var(--doc-rem)) calc(0.5 * var(--doc-rem)) calc(6 * var(--doc-rem)); }
  .print-stage .doc-wrap { width: 7.5in; max-width: none; zoom: var(--doc-scale, 1); }
}

@media print {
  html { background: #fff !important; }
  body { background: #fff !important; padding: 0 !important; }
  .appbar, .tabbar, .toast, .subbar, .no-print { display: none !important; }
  .view { padding: 0 !important; max-width: none !important; }
  .print-stage { padding: 0 !important; display: block; }
  .print-stage .doc-wrap { width: auto; zoom: 1 !important; }
  .doc {
    max-width: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }
  .doc .header, .doc .footer, .doc .meta, .doc .terms, .doc .included-bar {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .doc table.items tr, .doc .totals, .doc .accept, .doc .terms { break-inside: avoid; }
}