/* The document as the owner sees it while it fills in.
   It is paper: light in both themes, with the same blue rule and headings as the PDF and the customer's copy.
   The preview without an account carries the watermark and is blurred below the total (see applyLock in main.js). */
.doc { --ink: #0E1626; --ink-2: #3B4660; --muted: #5A6580; --rule: #E4E8F0; --line: #E4E8F0; --accent: #0A5CE6; --soft: #EAF1FE; --bad: #B42318; --ok-bg: #E7F7EE; --ok-ink: #11663A; --surface: #FFFFFF; --field: #CBD3E2; --track: #EEF1F6;
  position: relative; min-width: 0; overflow: hidden; background: #FFFFFF; color: var(--ink); color-scheme: light;
  border-radius: 4px 4px 16px 16px; border-top: 5px solid #0A5CE6; box-shadow: 0 1px 0 rgba(14, 22, 38, .06), 0 16px 44px rgba(14, 22, 38, .14) }
.sheet { padding: 26px 28px 30px; min-width: 0; font-size: 14.5px; line-height: 1.55 }
.sheet h2 { font-size: 26px; margin: 0; text-transform: uppercase; letter-spacing: .03em }
.sheet h3 { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 22px 0 6px; border-bottom: 1px solid var(--rule); padding-bottom: 6px; line-height: 1.3 }
.sheet .head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin-bottom: 8px }
.sheet .biz { color: var(--muted); font-size: 13px; text-align: right }
.sheet .biz b { color: var(--ink); font-size: 15px; display: block; font-weight: 650 }
.sheet dl { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 0; margin: 0 }
.sheet dt, .sheet dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--rule) }
.sheet dt { color: var(--muted); padding-right: 12px }
.sheet dd { overflow-wrap: anywhere }
.sheet .scroll { overflow-x: auto }
.sheet table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
.sheet th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--rule) }
.sheet td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top }
.sheet .num { text-align: right; white-space: nowrap; padding-left: 8px; padding-right: 12px }
.sheet th.num:last-child, .sheet td.num:last-child { padding-right: 0 }
.sheet tr.tot td { border-bottom: 0; font-weight: 600 }
.sheet tr.grand td { font-size: 18px; font-weight: 650; letter-spacing: -.02em; border-top: 2px solid var(--ink) }
.sheet ul, .sheet ol { margin: 0; padding-left: 20px }
.sheet li { margin: 3px 0 }
.sheet p { margin: 6px 0 }
.sheet .blank { display: inline-block; min-width: 90px; border-bottom: 1.5px solid var(--bad); color: var(--bad); font-size: 12px }
.sheet .sign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 10px }
.sheet .sign div { border-top: 1px solid var(--ink); padding-top: 4px; margin-top: 34px; color: var(--muted); font-size: 12px }
.sheet .lead { font-weight: 600; background: var(--soft); border-radius: 12px; padding: 10px 14px; margin: 12px 0 }
.sheet .signed { background: var(--ok-bg); color: var(--ok-ink); border-radius: 12px; padding: 10px 14px }

/* locked preview */
.doc.wm { user-select: none; -webkit-user-select: none }
.doc.wm::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3; background-size: 320px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Ctext x='18' y='112' transform='rotate(-24 160 100)' font-family='Arial,Helvetica,sans-serif' font-size='19' font-weight='700' fill='%237A869F'%3EQuote by Voice · kashtree.tech%3C/text%3E%3C/svg%3E") }
.sheet .bl { filter: blur(6px); opacity: .75; pointer-events: none; user-select: none; -webkit-user-select: none }
.lockcta { position: relative; z-index: 2; display: grid; gap: 8px; justify-items: start; margin: 18px 0 12px; padding: 18px 20px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(10, 16, 32, .16) }
.lockcta b { font-size: 17px; letter-spacing: -.01em }
.lockcta span { color: var(--muted); font-size: 14px }

/* ---------- phones ---------- */
@media (max-width: 520px) {
  .sheet { padding: 18px 16px 22px; font-size: 14px }
  .sheet .biz { text-align: left }
  /* On a phone the price table would not fit, and the total is the number that matters most.
     Each work item becomes a small block: description, then quantity and unit price, then its total.
     Only the look changes here. The stored document, the PDF and the customer's copy keep the table. */
  #sheet table, #sheet tbody { display: block }
  #sheet thead { display: none }
  #sheet tr { display: grid; grid-template-columns: 1.5em auto auto minmax(0, 1fr); column-gap: 8px; row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--rule) }
  #sheet td { display: block; padding: 0; border: 0 }
  #sheet tr > td:nth-child(1) { grid-area: 1 / 1; color: var(--muted) }
  #sheet tr > td:nth-child(2) { grid-area: 1 / 2 / auto / -1; font-weight: 600 }
  #sheet tr > td:nth-child(3) { grid-area: 2 / 2; text-align: left }
  #sheet tr > td:nth-child(4) { grid-area: 2 / 3 }
  #sheet tr > td:nth-child(5) { grid-area: 2 / 4; justify-self: end }
  #sheet tr > td:nth-child(6) { grid-area: 3 / 2 / auto / -1; justify-self: end; font-weight: 650 }
  #sheet td[data-label]::before { content: attr(data-label); color: var(--muted); font-weight: 400; font-size: 12.5px; margin-right: 10px }
  #sheet tr.tot { display: flex; justify-content: flex-end; align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 0 }
  #sheet tr.tot > td { font-weight: 600 }
  #sheet tr.grand { border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 10px }
  #sheet tr.grand > td { font-size: 18px; border-top: 0 }
}