/* ---------- estimator + invoices (2026-09-19). Built in the app's own tokens
   (warm ink, red, condensed display type) and shipped as its own file so it
   goes out apart from the other unreleased style changes in style.css. The one
   deliberate exception is the invoice itself: a light paper sheet, because it
   is a document people print, save as PDF and send. */

/* the two-button switch at the top of the Pay and Invoices tabs */
.pay-switch { display: inline-flex; margin: 0 0 18px; }
.pay-switch .mini { padding: 7px 14px; font-size: 13px; }

/* ---------- estimator */
.est-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.est-main { min-width: 0; }
.est-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.est-row, .est-prow { display: grid; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.est-row:last-child, .est-prow:last-child { border-bottom: none; }
.est-row {
  grid-template-columns: 56px minmax(0, 1fr) 118px; gap: 8px 14px;
  grid-template-areas: "thumb name line" "thumb ctl line";
}
.est-thumb { grid-area: thumb; align-self: start; }
.est-row .est-name { grid-area: name; }
.est-row .est-ctl { grid-area: ctl; }
.est-row .est-line { grid-area: line; align-self: center; }
.est-prow { grid-template-columns: minmax(0, 1fr) 150px 118px; }
.est-row.has, .est-prow:has(input:not(:placeholder-shown)) { background: var(--panel2); }
.est-thumb .pay-thumb { width: 56px; height: 56px; border-radius: 8px; }
.est-thumb .pay-thumb.none { padding: 2px; }
.est-thumb .pay-thumb.none span { display: none; }
.est-thumb .pay-thumb.none a { font-size: 9px; letter-spacing: 0; }
.est-name h4 { margin: 0; font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 0.02em; color: var(--ink); }
.est-name p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.est-ctl { display: flex; align-items: flex-end; gap: 12px; }
.est-qty { display: flex; align-items: center; gap: 4px; }
.est-qty .mini { width: 34px; height: 36px; padding: 0; font-size: 18px; line-height: 1; }
.est-qty input { width: 58px; margin: 0; text-align: center; padding: 8px 4px; font-variant-numeric: tabular-nums; }
.est-views, .est-posts { margin: 0; font-size: 11.5px; }
.est-views input, .est-posts input { margin-top: 3px; padding: 7px 9px; font-variant-numeric: tabular-nums; }
.est-views input { width: 108px; }
.est-line { text-align: right; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.est-line b { display: block; color: var(--ink); font-size: 14px; }
.est-line small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }

.est-result { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; position: sticky; top: 16px; }
.est-result h4 { margin: 0 0 10px; font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 0.03em; }
.est-label { display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.est-big { display: block; font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif; font-weight: 800; font-size: 44px; line-height: 1.05; color: var(--warn); font-variant-numeric: tabular-nums; }
.est-range { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.est-break { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.est-break div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.est-break dt { color: var(--muted); }
.est-break dd { margin: 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.est-unpriced { margin: 12px 0 0; font-size: 12.5px; color: var(--warn); }
.est-goal { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.est-goal .row2 { grid-template-columns: 1fr; gap: 0; }
.est-goal-out { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.est-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.est-bar { display: none; }

/* ---------- invoices: tracker */
.inv-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.inv-count { color: var(--ink); font-variant-numeric: tabular-nums; }
.inv-links { margin-left: auto; display: inline-flex; gap: 6px; text-transform: none; letter-spacing: 0; }
.inv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.inv-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.inv-tile strong { display: block; margin-top: 4px; font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif; font-weight: 800; font-size: 30px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.inv-tile small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.inv-tile.hot strong { color: var(--good); }
.inv-cta { margin-top: 14px; }
.inv-recon { margin: 12px 0 0; }
.inv-src { margin: 18px 0 0; }
.inv-src-hint { margin: 0 0 0 4px; }
.inv-notice { margin: 0 0 16px; }
.inv-nostart { display: block; margin: 8px 0 12px; max-width: 64ch; }

.inv-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.inv-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); transition: opacity 160ms ease, background-color 160ms ease; }
.inv-row:last-child { border-bottom: none; }
.inv-pick .inv-row.on { background: var(--panel2); }
.inv-pick .inv-row.out { opacity: 0.55; }
.inv-check { display: flex; margin: 0; padding: 10px; cursor: pointer; }
.inv-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--good); cursor: pointer; }
.inv-thumb { flex: none; width: 64px; height: 36px; border-radius: 6px; overflow: hidden; background: var(--panel2); border: 1px solid var(--line); }
.inv-thumb.none { border-style: dashed; }
.inv-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; }
.inv-thumb.posting::after, .inv-thumb.bonus::after { display: block; text-align: center; font-size: 9.5px; line-height: 34px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.inv-thumb.posting::after { content: "Posting"; }
.inv-thumb.bonus::after { content: "Bonus"; }
.inv-main { flex: 1; min-width: 0; }
.inv-title { display: block; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.inv-title:hover { color: var(--red); text-decoration: underline; }
.inv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.inv-flag { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.inv-flag.warn { color: var(--warn); }
.inv-flag b { font-weight: 700; }
.inv-amt { flex: none; text-align: right; font-weight: 800; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.inv-amt small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.inv-amt.soft { color: var(--muted); }
.inv-on { color: var(--good); font-weight: 700; }
.inv-posted { color: var(--good); }
.chip.src-kitchen { color: #7fd8d0; }
.chip.src-pipeline { color: var(--muted); }
.chip.inv-st-withdrawn { color: var(--muted); }
.inv-post { margin: 0 0 10px; }
.inv-post p { margin: 0 0 6px; font-size: 14px; }
.inv-post .chip { margin-left: 6px; }
.inv-post .hint { margin: 4px 0 0; }

/* ---------- invoices: builder */
.inv-grid { grid-template-columns: minmax(0, 1fr) 320px; }
.inv-period .filter-bar { margin-bottom: 8px; }
.inv-period .row2 label { margin: 4px 0; }
.inv-ai .modal-actions { margin-top: 8px; }
.inv-ai-out { margin-top: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; line-height: 1.55; }
.inv-ai-out p { margin: 0 0 8px; }
.inv-ai-out p:last-child { margin-bottom: 0; }
.inv-ai-q { margin: 0 0 8px; padding-left: 18px; color: var(--warn); }
.inv-ai-changed { color: var(--good); font-weight: 700; }
.inv-ai-changed .mini { margin-left: 8px; }
.inv-pay .row2 label { margin: 6px 0; }
.inv-summary h4 { margin-bottom: 4px; }
.inv-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1.5px solid var(--muted); font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif; font-weight: 800; }
.inv-total span { font-size: 16px; }
.inv-total strong { font-size: 32px; color: var(--warn); font-variant-numeric: tabular-nums; }
.inv-why { min-height: 1.4em; margin: 8px 0 0; font-size: 12.5px; color: var(--warn); }
.inv-error { margin: 8px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--ink); background: var(--red-dim); border: 1px solid var(--red); border-radius: 8px; }
.inv-error[hidden] { display: none; }
.inv-summary .btn:disabled { opacity: 0.4; cursor: default; }
.inv-empty { position: static; max-width: 520px; }
.inv-empty p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.inv-hist .mini { flex: none; }

/* ---------- invoices: owner review + billing settings */
.inv-modal { max-width: 880px; padding: 18px; }
.inv-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-owner { margin-top: 16px; padding: 16px 18px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; }
.inv-owner h4 { margin: 0 0 10px; font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 0.03em; }
.inv-ok { margin: 0 0 12px; font-size: 13.5px; color: var(--good); }
.inv-problems { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.inv-problems li.block { color: var(--red); }
.inv-problems li.warn { color: var(--warn); }
.inv-decide { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-decide .btn:disabled { opacity: 0.4; cursor: default; }
#ownForm { margin-top: 12px; }
.inv-settings { margin: 0 0 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; }
.inv-settings summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 14px; list-style-position: inside; }
.inv-settings summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
.inv-form { padding-bottom: 14px; }

/* ---------- the invoice document: a light paper sheet */
.inv-paper { background: #fbf9f5; color: #1c1815; border-radius: 6px; padding: 34px 38px; font-size: 14px; line-height: 1.5; }
.doc-head span, .doc-parties span, .doc-pay span, .doc-note span { display: block; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; color: #7a716a; margin-bottom: 4px; }
.inv-paper p { margin: 2px 0 0; }
.inv-paper .pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 2px solid #1c1815; }
.doc-head h2 { margin: 0; font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif; font-weight: 800; font-size: 40px; letter-spacing: 0.08em; line-height: 1; }
.inv-paper .doc-num { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 8px; }
.doc-dates { display: grid; gap: 10px; text-align: right; }
.doc-dates b, .doc-parties b, .doc-pay b { font-weight: 700; }
.doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 0; }
.doc-lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc-lines th { text-align: left; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: #7a716a; padding: 8px 8px 8px 0; border-bottom: 1px solid #1c1815; }
.doc-lines td { padding: 9px 8px 9px 0; border-bottom: 1px solid #e4ded5; vertical-align: top; }
.doc-lines .num { text-align: right; white-space: nowrap; padding-right: 0; }
.doc-lines tfoot td { border-bottom: none; border-top: 2px solid #1c1815; padding-top: 12px; font-family: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif; font-weight: 800; font-size: 20px; }
.inv-paper .doc-tag { display: inline-block; font-size: 9.5px; letter-spacing: 0.06em; color: #7a716a; border: 1px solid #cfc7bc; border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }
.doc-upload { padding: 18px 0; border-bottom: 1px solid #e4ded5; }
.doc-upload b { font-size: 22px; }
.doc-pay, .doc-note { margin-top: 20px; }
.inv-paper .doc-terms, .inv-paper .doc-verified, .inv-paper .doc-sentback { margin-top: 20px; font-size: 12.5px; color: #5b524b; }
.inv-paper .doc-verified { padding-top: 14px; border-top: 1px solid #e4ded5; }
.inv-paper .doc-sentback { color: #a3281c; }

/* ---------- invoices: file links, checking your own invoice, the files confirmation */
.inv-file { font-size: 12px; font-weight: 700; color: var(--red); text-decoration: none; white-space: nowrap; }
.inv-file:hover { text-decoration: underline; }
.inv-file:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 3px; }
.inv-file.need { color: var(--warn); text-decoration: underline; }
#invPickHead { scroll-margin-top: 84px; }
.inv-attach { margin-top: 12px; }
.inv-needlink { display: block; margin: 8px 0 0; max-width: 64ch; }
.inv-needlink .mini { margin-left: 6px; }
#mOut .inv-msum:focus { outline: none; }
.inv-match textarea { min-height: 120px; resize: vertical; }
.inv-match .modal-actions { margin-top: 10px; }
.inv-empty-check { margin-top: 22px; max-width: 720px; }
.inv-msum { margin: 16px 0 12px; padding: 14px 16px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; line-height: 1.55; }
.inv-msum p { margin: 0 0 6px; }
.inv-msum p:last-child { margin-bottom: 0; }
.inv-mh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.inv-mh-sum { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--warn); }
.inv-mrow { align-items: flex-start; }
.inv-mrow .inv-amt { padding-top: 2px; }
.inv-mline { margin: 0; padding-left: 10px; border-left: 2px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.inv-mrow .inv-meta { margin-top: 6px; }
.inv-title.small { display: inline; font-size: 13px; }
.inv-mmatch { margin: 6px 0 0; font-size: 13px; line-height: 1.4; }
.inv-mmatch span { color: var(--muted); }
.chip.mv-ok { color: var(--good); }
.chip.mv-warn { color: var(--warn); }
.chip.mv-bad { color: var(--red); }
.chip.mv-muted { color: var(--muted); }
.inv-muse { align-items: center; margin-top: 14px; }
.inv-muse .btn { white-space: nowrap; }
.inv-muse .hint { margin: 0; flex: 1 1 200px; }
.inv-own { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 6px; padding: 13px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 14px; line-height: 1.45; }
.inv-own input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--good); cursor: pointer; }
.inv-own:has(input:checked) { border-color: var(--good); }
.inv-own:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.inv-claim { margin: 0 0 14px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
.inv-claim h5 { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.inv-claim p { margin: 0 0 6px; }
.inv-claim details { margin-top: 6px; }
.inv-claim summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.inv-claim-text { margin: 8px 0 0; padding: 10px 12px; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.5 ui-monospace, Menlo, monospace; background: var(--panel2); border-radius: 8px; }
.inv-paper .doc-file { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: #7a716a; }
.inv-paper .doc-file a { color: #1c1815; text-decoration: underline; }
.inv-paper .doc-verified.doc-own { margin-top: 8px; padding-top: 0; border-top: none; }

/* ---------- phones and small screens */
@media screen and (max-width: 900px) {
  .est-grid, .inv-grid { grid-template-columns: 1fr; }
  .est-result { position: static; }
  main:has(.est), main:has(.inv) { overflow: visible; }
  .est-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; bottom: 0; margin: 16px -24px -24px; padding: 10px 24px;
    background: var(--panel); border-top: 1px solid var(--line); z-index: 4;
  }
  .est-bar strong { font-size: 20px; color: var(--warn); font-variant-numeric: tabular-nums; }
  .est-bar-range { font-size: 12px; color: var(--muted); margin-left: 6px; }
  .est-bar .est-label { display: inline; }
  .inv-summary { position: sticky; bottom: 0; z-index: 4; margin: 0 -24px -24px; border-radius: 14px 14px 0 0; border-bottom: none; padding: 12px 24px; }
  .inv-summary .est-break, .inv-summary .hint, .inv-summary h4 { display: none; }
  .inv-summary .inv-total { margin-top: 0; padding-top: 0; border-top: none; }
  .inv-summary .btn.wide { margin-top: 8px; }
  .inv-summary .inv-why:empty { display: none; }
  html:has(.inv-summary) { scroll-padding-bottom: 150px; }   /* a focused control scrolls above the sticky bar, not under it */
}
@media screen and (max-width: 720px) {
  .est-row { grid-template-columns: 48px minmax(0, 1fr); gap: 10px 12px; grid-template-areas: "thumb name" "ctl ctl" "line line"; }
  .est-row .est-line { text-align: left; }
  .est-thumb .pay-thumb { width: 48px; height: 48px; }
  .est-prow { grid-template-columns: minmax(0, 1fr) 120px; }
  .est-prow .est-line { grid-column: 1 / -1; text-align: left; }
  .est-big { font-size: 38px; }
  .est-qty .mini { width: 44px; height: 44px; }
  .est-qty input { width: 72px; padding: 11px 4px; }
  .inv-row { gap: 8px; padding: 11px 12px; }
  .inv-thumb { width: 48px; height: 27px; }
  .inv-mh-sum { margin-left: 0; }
  .inv-thumb.none { visibility: hidden; }
  .inv-check { padding: 6px; }
  .inv-meta .chip { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .inv-paper { padding: 22px 18px; }
  .doc-parties { grid-template-columns: 1fr; gap: 14px; }
  .doc-dates { text-align: left; }
  .doc-head h2 { font-size: 32px; }
  .doc-lines thead th:nth-child(2), .doc-lines tbody td:nth-child(2), .doc-lines tfoot td:nth-child(2) { display: none; }
  .inv-modal { padding: 12px; }
  .est-bar { margin: 16px -12px -12px; padding: 10px 12px; }
  .inv-summary { margin: 0 -12px -12px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .inv-row { transition: none; }
}

/* ---------- printing: only the invoice, on white, no app around it */
@media print {
  @page { margin: 12mm; }
  body.inv-printing { background: #fff; }
  body.inv-printing > *:not(.overlay) { display: none !important; }
  body.inv-printing .overlay { position: static; display: block; background: none; padding: 0; animation: none; }
  body.inv-printing .modal { background: none; border: none; box-shadow: none; padding: 0; max-width: none; max-height: none; overflow: visible; animation: none; }
  body.inv-printing .inv-noprint { display: none !important; }
  body.inv-printing .inv-paper { border-radius: 0; padding: 0; background: #fff; font-size: 13px; line-height: 1.4; }
  /* a typical invoice, with its verification and ownership lines, fits one Letter or A4 page; a long one lists the total once, at the end */
  body.inv-printing .doc-head { padding-bottom: 12px; }
  body.inv-printing .doc-head h2 { font-size: 32px; }
  body.inv-printing .doc-parties { padding: 12px 0; gap: 16px; }
  body.inv-printing .doc-lines tfoot { display: table-row-group; }
  body.inv-printing .doc-lines td { padding: 6px 8px 6px 0; }
  body.inv-printing .doc-lines tr, body.inv-printing .doc-pay, body.inv-printing .doc-note { break-inside: avoid; }
  body.inv-printing .doc-pay, body.inv-printing .doc-note { margin-top: 12px; }
  body.inv-printing .inv-paper .doc-terms, body.inv-printing .inv-paper .doc-verified, body.inv-printing .inv-paper .doc-sentback { margin-top: 12px; }
}