/* The paper document: invoice and price sheet (white, printable). */
.ydoc { position: relative; width: 100%; max-width: 816px; margin: 0 auto; box-sizing: border-box; padding: 56px 60px 48px; background: #fff; color: #17171a;
  font: 400 13px/1.55 "IBM Plex Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.ydoc * { box-sizing: border-box; }
.ydoc b { font-weight: 600; }
.yd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 4px; }
.yd-logo { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; padding-top: 2px; }
.yd-logo svg { height: 26px; width: auto; display: block; color: #0B0B0C; }
.yd-h1 { flex-basis: 100%; margin: 16px 0 0; font: 800 28px/1.1 "Archivo", "Noto Sans SC", sans-serif; letter-spacing: -.005em; }
.ydoc[lang="zh"] .yd-h1 { letter-spacing: .06em; }
.yd-title { text-align: right; padding-top: 0; }
.yd-right { font: 600 15px/1.35 "IBM Plex Sans", "Noto Sans SC", sans-serif; max-width: 360px; margin: 0 0 10px auto; color: #17171a; }
.yd-sub { color: #6b6b70; font-size: 12px; }
.yd-meta { margin-left: auto; border-collapse: collapse; font-size: 12px; }
.yd-meta td { padding: 2px 0 2px 18px; text-align: right; white-space: nowrap; }
.yd-meta td:first-child { color: #6b6b70; }
.yd-meta td:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.yd-k { font: 600 10.5px/1.4 "IBM Plex Mono", "Noto Sans SC", monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a8a90; margin-bottom: 6px; }
.ydoc[lang="zh"] .yd-k { letter-spacing: .06em; font-family: "IBM Plex Sans", "Noto Sans SC", sans-serif; }
.yd-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 24px 0 20px; }
.yd-parties > div { width: 250px; max-width: 100%; overflow-wrap: anywhere; }
.yd-parties > .to { justify-self: center; }
.yd-parties.one > div { width: auto; }
.yd-parties.one { grid-template-columns: 1fr; padding-bottom: 6px; }
.yd-parties .up { text-transform: uppercase; letter-spacing: .02em; }
.yd-parties .gap { display: block; height: 8px; }
.yd-parties .to b { color: #17171a; }
.yd-proj { padding: 10px 14px; background: #f5f5f6; border-radius: 6px; margin-bottom: 18px; }
.yd-proj .yd-k { display: inline; margin-right: 8px; }
.yd-items, .yd-rates { width: 100%; border-collapse: collapse; }
.yd-items th { text-align: left; font: 600 10.5px/1.4 "IBM Plex Mono", "Noto Sans SC", monospace; letter-spacing: .1em; text-transform: uppercase; color: #8a8a90; padding: 8px 8px; border-bottom: 1px solid #17171a; }
.yd-items td { padding: 11px 8px; border-bottom: 1px solid #e6e6e8; vertical-align: top; }
.yd-items th:first-child, .yd-items td:first-child { padding-left: 0; }
.yd-items th:last-child, .yd-items td:last-child { padding-right: 0; }
.ydoc .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ydoc .u { color: #6b6b70; white-space: nowrap; }
.ydoc .b { font-weight: 600; }
.d1 { font-weight: 500; }
.d2 { color: #6b6b70; font-size: 12px; margin-top: 2px; }
.d1 .alt { color: #8a8a90; font-weight: 400; font-size: 12px; margin-left: 6px; }
.yd-tot { margin: 16px 0 0 auto; border-collapse: collapse; min-width: 300px; font-variant-numeric: tabular-nums; }
.yd-tot td { padding: 5px 0; }
.yd-tot td:last-child { text-align: right; padding-left: 32px; white-space: nowrap; }
.yd-tot td:first-child { color: #6b6b70; }
.yd-tot .grand td { border-top: 2px solid #17171a; padding-top: 10px; font: 800 18px/1.2 "Archivo", "Noto Sans SC", sans-serif; color: #17171a; }
.yd-tot .bal td { font-weight: 700; color: #C83736; }
.yd-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 36px; padding-top: 20px; border-top: 1px solid #e6e6e8; }
.yd-foot.one { grid-template-columns: 1fr; }
.yd-foot p { margin: 0; color: #3a3a3f; }
.yd-thanks { margin-top: 30px; font: 600 13px/1.4 "Archivo", "Noto Sans SC", sans-serif; color: #17171a; }
.yd-stamp { display: inline-block; margin: 0; transform: rotate(-6deg); border: 2px solid currentColor; border-radius: 5px; padding: 2px 9px; font: 800 12px/1.2 "Archivo", "Noto Sans SC", sans-serif; letter-spacing: .12em; opacity: .9; white-space: nowrap; }
.yd-stamp.s-st_paid { color: #1f9d5c; }
.yd-stamp.s-st_partial { color: #c27c0e; }
.yd-stamp.s-st_void { color: #8a8a90; }
.yd-stamp.s-st_overdue { color: #C83736; }
/* quote + rate card tables */
.yd-q { width: 100%; border-collapse: collapse; margin-top: 18px; font-variant-numeric: tabular-nums; }
.yd-q th { text-align: left; padding: 8px 10px; background: #f4f4f5; border: 1px solid #e4e4e7; font: 600 12.5px/1.3 "IBM Plex Sans", "Noto Sans SC", sans-serif; color: #17171a; }
.yd-q th.n { text-align: right; width: 120px; }
.yd-q td { padding: 8px 10px; border: 1px solid #ececef; vertical-align: top; }
.yd-q td.n { text-align: right; }
.yd-q tr.st td { border: 0; padding-top: 6px; }
.yd-q tr.st td.n { border: 1px solid #17171a; padding: 8px 10px; }
.yd-q tr:has(+ tr.st) td:last-child { border-bottom-color: #17171a; }
.yd-q tr.cn td { background: #f8f8f9; color: #6b6b70; font-size: 12px; text-align: center; }
.yd-rate th.n { width: 130px; }
.yd-rate .neg { color: #6b6b70; font-weight: 500; }
.yd-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin-top: 26px; border: 1px solid #e3e4ea; }
.yd-notes div { padding: 12px 14px; font-size: 12.5px; color: #3a3a3f; text-align: center; }
.yd-notes div + div { border-left: 1px solid #e3e4ea; }
.yd-bottom { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; margin-top: 18px; }
.yd-bottom .yd-tot { margin: 0; }
.yd-pay p { margin: 0; color: #2a2a2e; white-space: normal; }
.yd-sig { display: block; max-width: 200px; max-height: 70px; margin-top: 14px; }
/* price sheet */
.yd-intro { margin: 22px 0 0; color: #3a3a3f; font-size: 13.5px; }
.yd-cat { margin: 30px 0 6px; font: 700 15px/1.3 "Archivo", "Noto Sans SC", sans-serif; letter-spacing: .04em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid #17171a; }
.yd-rates td { padding: 11px 0; border-bottom: 1px solid #e6e6e8; vertical-align: top; }
.yd-rates td.n { padding-left: 24px; }
.yd-rates .per { color: #8a8a90; font-weight: 400; font-size: 12px; }
.yd-contact { margin-top: 36px; padding-top: 18px; border-top: 1px solid #e4e4e7; color: #3a3a3f; font-size: 12.5px; }
@media (max-width: 640px) {   /* phones (not the fixed-width copy used for the PDF) */
  .ydoc:not(.pdf) { padding: 28px 20px 28px; font-size: 12.5px; }
  .ydoc:not(.pdf) .yd-head { flex-direction: column; }
  .ydoc:not(.pdf) .yd-title { text-align: left; }
  .ydoc:not(.pdf) .yd-meta { margin-left: 0; }
  .ydoc:not(.pdf) .yd-meta td { padding: 2px 18px 2px 0; text-align: left; }
  .ydoc:not(.pdf) .yd-parties { grid-template-columns: 1fr; gap: 18px; }
  .ydoc:not(.pdf) .yd-items th.u, .ydoc:not(.pdf) .yd-items td.u { display: none; }
  .ydoc:not(.pdf) .yd-tot { min-width: 0; width: 100%; }
  .ydoc:not(.pdf) .yd-bottom { grid-template-columns: 1fr; }
  .ydoc:not(.pdf) .yd-q th.n { width: auto; }
  .ydoc:not(.pdf) .yd-q th, .ydoc:not(.pdf) .yd-q td { padding: 7px 6px; }
  .ydoc:not(.pdf) .yd-q td.n, .ydoc:not(.pdf) .yd-q th.n { white-space: nowrap; font-size: 12px; }
  .ydoc:not(.pdf) .d1 .alt { display: block; margin: 2px 0 0; }
  .ydoc:not(.pdf) .yd-notes div + div { border-left: 0; border-top: 1px solid #e3e4ea; }
  .ydoc:not(.pdf) .yd-right { margin-left: 0; }
  .ydoc:not(.pdf) .yd-head { gap: 14px; padding-bottom: 0; }
  .ydoc:not(.pdf) .yd-logo { align-self: stretch; column-gap: 12px; }
  .ydoc:not(.pdf) .yd-logo svg { height: 22px; }
  .ydoc:not(.pdf) .yd-h1 { margin: 10px 0 0; font-size: 22px; }
  .ydoc:not(.pdf) .yd-stamp { font-size: 10.5px; padding: 2px 6px; border-width: 1.5px; }
  .ydoc:not(.pdf) .yd-right { font-size: 13.5px; margin: 0 0 6px; max-width: none; }
  .ydoc:not(.pdf) .yd-meta { font-size: 12px; }
  .ydoc:not(.pdf) .yd-meta td { padding: 1px 16px 1px 0; }
  .ydoc:not(.pdf) .yd-parties { padding-top: 18px; }
}
@media print {
  @page { size: letter; margin: 0; }
  body { background: #fff !important; }
  .no-print { display: none !important; }
  .ydoc { max-width: none; box-shadow: none !important; border-radius: 0 !important; }
}

/* rate sheet on phones: name on its own line, the prices underneath */
@media (max-width: 640px) {
  .ydoc:not(.pdf) .yd-rate, .ydoc:not(.pdf) .yd-rate thead, .ydoc:not(.pdf) .yd-rate tbody { display: block; width: 100%; }
  .ydoc:not(.pdf) .yd-rate tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ydoc:not(.pdf) .yd-rate tr > :first-child, .ydoc:not(.pdf) .yd-rate tr.cn td { grid-column: 1 / -1; }
  .ydoc:not(.pdf) .yd-rate tr:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
  .ydoc:not(.pdf) .yd-rate th, .ydoc:not(.pdf) .yd-rate td { width: auto !important; border-right: 0; }
  .ydoc:not(.pdf) .yd-rate .n { text-align: left; }
}

.yd-meta td.solo { color: #6b6b70; font-weight: 500; padding-left: 0; }
.ydoc-prices .yd-h1 { font-size: 24px; }
@media (max-width: 640px) { .ydoc:not(.pdf) .yd-parties > div { width: auto; } .ydoc:not(.pdf) .yd-parties > .to { justify-self: start; } .ydoc:not(.pdf) .ydoc-prices .yd-h1, .ydoc-prices:not(.pdf) .yd-h1 { font-size: 20px; } }
.ydoc-prices .yd-h1, .ydoc-prices[lang="zh"] .yd-h1 { letter-spacing: 0; font-size: 22px; }
/* bill-to / prepared-for sits on the right edge, text aligned right */
.yd-parties > .to { justify-self: end; text-align: right; }
/* rate card: the role line is a small subtitle under the logo */
.ydoc-prices .yd-h1, .ydoc-prices[lang="zh"] .yd-h1 { margin-top: 10px; font: 500 13.5px/1.4 "IBM Plex Sans", "Noto Sans SC", sans-serif; letter-spacing: 0; color: #3a3a3f; }
@media (max-width: 640px) { .ydoc:not(.pdf) .yd-parties > .to { justify-self: start; text-align: left; } .ydoc-prices:not(.pdf) .yd-h1 { font-size: 13px; margin-top: 8px; } }
/* rate card on phones: title stays top-right, like on desktop */
@media (max-width: 640px) {
  .ydoc-prices:not(.pdf) .yd-head { flex-direction: row; align-items: flex-start; }
  .ydoc-prices:not(.pdf) .yd-logo { align-self: auto; }
  .ydoc-prices:not(.pdf) .yd-title { text-align: right; }
  .ydoc-prices:not(.pdf) .yd-right { margin: 0; white-space: nowrap; }
}
.ydoc-prices .yd-right { margin-bottom: 0; }

/* the brand red lives on the top edge of the paper (same red as the logo dot) */
.ydoc { border-top: 4px solid #C83736; }

/* ---- reading order: names and amounts first, details quieter ---- */
.yd-parties > div { width: 280px; color: #4a4a50; font-size: 12.5px; line-height: 1.6; }
.yd-parties b { font-size: 13px; color: #17171a; }
.yd-proj { padding: 12px 16px; margin-bottom: 20px; }
.yd-proj .yd-k { display: block; margin: 0 0 3px; }
.yd-proj .pn { font-weight: 600; font-size: 14px; line-height: 1.4; color: #17171a; }
.yd-proj .pm { font-size: 12.5px; color: #6b6b70; margin-top: 1px; }
.d1 { font-weight: 600; font-size: 13.5px; color: #17171a; }
.d2 { font-size: 12px; color: #74747a; margin-top: 3px; }
.yd-items td { padding: 13px 8px; }
.yd-items td.n.b { font-size: 13.5px; font-weight: 600; }
.yd-tot td:first-child { font-size: 12.5px; }
.yd-tot .grand td { font-size: 16px; }
.yd-tot .grand td:last-child { font-size: 21px; }
.yd-tot .bal td { font-size: 14px; }
.yd-bottom { margin-top: 24px; gap: 40px; }
.yd-pay { font-size: 12.5px; color: #3a3a3f; }
.yd-pay .yd-k { margin-bottom: 10px; }
.yd-pay p { margin: 0 0 2px; color: #4a4a50; }
.yd-ph { font-size: 12px; color: #74747a; }
.yd-ph + p { font-size: 13.5px; font-weight: 600; color: #17171a; margin-top: 1px; }
.yd-gap { height: 12px; }
.yd-kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 14px; row-gap: 4px; margin: 0; }
.yd-kv dt { color: #74747a; font-size: 12px; max-width: 190px; padding-top: 1px; }
.yd-kv dd { margin: 0; color: #17171a; font-weight: 500; font-size: 12.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.yd-thanks { margin-top: 28px; }
@media (max-width: 640px) {
  .ydoc:not(.pdf) .yd-kv { grid-template-columns: 1fr; row-gap: 0; }
  .ydoc:not(.pdf) .yd-kv dt { max-width: none; margin-top: 6px; }
  .ydoc:not(.pdf) .yd-kv dt:first-child { margin-top: 0; }
  .ydoc:not(.pdf) .yd-tot .grand td:last-child { font-size: 19px; }
}
.yd-kv { grid-template-columns: 150px minmax(0, 1fr); }
.yd-kv dt { max-width: none; }
.yd-kv + .yd-kv { margin-top: 0; }
.yd-tot { min-width: 270px; }
.yd-parties > div { text-wrap: balance; }
.yd-parties .addr { display: inline-block; text-wrap: balance; }
.yd-parties > .to { width: 300px; }
@media (max-width: 640px) { .ydoc:not(.pdf) .yd-bottom .yd-tot { order: -1; } .ydoc:not(.pdf) .yd-parties > .to { width: auto; } }
.yd-q .d1 { font-weight: 500; font-size: 13px; }
/* closing row: thanks on the left, signature on the right */
.yd-end { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 36px; }
.yd-end .yd-thanks { margin: 0; }
.yd-sign { width: 220px; text-align: left; }
.yd-sign .yd-sig { display: block; max-width: 200px; max-height: 64px; margin: 0 0 6px; }
.yd-sign .sl { height: 1px; background: #17171a; margin-bottom: 6px; }
.yd-sign .sn { font-size: 12.5px; font-weight: 600; color: #17171a; }
.yd-sign .so { font-size: 11.5px; color: #74747a; }
@media (max-width: 640px) { .ydoc:not(.pdf) .yd-end { flex-direction: column-reverse; align-items: flex-start; gap: 22px; } .ydoc:not(.pdf) .yd-sign { width: 200px; } }
/* signature sits under the totals, in the space next to the payment details */
.yd-bottom { grid-template-areas: "pay tot" "pay sign"; grid-template-rows: auto 1fr; row-gap: 0; }
.yd-bottom > .yd-pay { grid-area: pay; }
.yd-bottom > .yd-tot { grid-area: tot; }
.yd-bottom > .yd-sign { grid-area: sign; align-self: start; justify-self: end; width: 230px; margin-top: 44px; }
.yd-thanks { margin-top: 32px; }
@media (max-width: 640px) {
  .ydoc:not(.pdf) .yd-bottom { grid-template-areas: "tot" "pay" "sign"; grid-template-rows: auto; row-gap: 26px; }
  .ydoc:not(.pdf) .yd-bottom > .yd-sign { justify-self: start; margin-top: 4px; width: 200px; }
}
/* final: thanks bottom-left, signature bottom-right */
.yd-bottom { grid-template-areas: none; grid-template-rows: auto; }
.yd-bottom > .yd-pay, .yd-bottom > .yd-tot { grid-area: auto; }
.yd-end { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 40px; }
.yd-end .yd-thanks { margin: 0; }
.yd-end .yd-sign { width: 230px; margin: 0; }
@media (max-width: 640px) {
  .ydoc:not(.pdf) .yd-bottom { grid-template-areas: none; }
  .ydoc:not(.pdf) .yd-bottom .yd-tot { order: -1; }
  .ydoc:not(.pdf) .yd-end { flex-direction: column; align-items: stretch; gap: 26px; }
  .ydoc:not(.pdf) .yd-end .yd-sign { align-self: flex-end; width: 200px; }
}
/* PDF copy: a little tighter so a normal invoice fits on one letter page */
.ydoc.pdf { padding: 46px 60px 40px; }
.ydoc.pdf .yd-parties { padding: 20px 0 14px; }
.ydoc.pdf .yd-proj { margin-bottom: 14px; padding: 10px 16px; }
.ydoc.pdf .yd-items td { padding: 10px 8px; }
.ydoc.pdf .yd-items td:first-child { padding-left: 0; }
.ydoc.pdf .yd-items td:last-child { padding-right: 0; }
.ydoc.pdf .yd-bottom { margin-top: 18px; }
.ydoc.pdf .yd-kv { row-gap: 2px; }
.ydoc.pdf .yd-gap { height: 8px; }
.ydoc.pdf .yd-end { margin-top: 22px; }
.ydoc.pdf .yd-sign .yd-sig { max-height: 52px; }
/* project: one compact line so the line items get the room */
.yd-proj { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; padding: 7px 12px; margin-bottom: 12px; border-radius: 5px; }
.yd-proj .yd-k { display: inline; margin: 0; font-size: 9.5px; }
.yd-proj .pn { font-weight: 600; font-size: 12.5px; color: #17171a; }
.yd-proj .pm { font-size: 11.5px; color: #74747a; margin: 0; }
.ydoc.pdf .yd-proj { padding: 6px 12px; margin-bottom: 10px; }
/* From | Bill to | details — three equal columns */
.yd-parties.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.yd-parties.three > div { width: auto; justify-self: stretch; text-align: left; }
.yd-parties.three > .info { text-align: right; }
.yd-parties.three .info .yd-meta { margin-left: auto; font-size: 12.5px; }
.yd-parties.three .info .yd-meta td { padding: 1px 0 1px 14px; }
.yd-meta[hidden] { display: none; }
.yd-head:has(.yd-meta[hidden]) { padding-bottom: 0; align-items: center; }
.yd-head:has(.yd-meta[hidden]) .yd-right { margin: 0; }
@media (max-width: 640px) {
  .ydoc:not(.pdf) .yd-parties.three { grid-template-columns: 1fr; gap: 18px; }
  .ydoc:not(.pdf) .yd-parties.three > .info { order: -1; text-align: left; }
  .ydoc:not(.pdf) .yd-parties.three .info .yd-meta { margin-left: 0; }
  .ydoc:not(.pdf) .yd-parties.three .info .yd-meta td { padding: 1px 16px 1px 0; text-align: left; }
  .ydoc:not(.pdf) .yd-head:has(.yd-meta[hidden]) { flex-direction: row; justify-content: space-between; }
}
.yd-parties.three, .ydoc.pdf .yd-parties.three { padding-top: 30px; }
/* details column: left-aligned like the other two, each column exactly one third */
.yd-parties.three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
.yd-parties.three > .info { text-align: left; }
.yd-parties.three .info .yd-meta { margin-left: 0; }
.yd-parties.three .info .yd-meta td { text-align: left; padding: 1px 14px 1px 0; }
.yd-parties.three .info .yd-meta td:last-child { padding-right: 0; }
/* details fill their third: label at the left edge of the column, value at the right edge of the page */
.yd-parties.three .info .yd-meta { width: 100%; }
.yd-parties.three .info .yd-meta td:last-child { text-align: right; }
@media (max-width: 640px) { .ydoc:not(.pdf) .yd-parties.three .info .yd-meta { width: auto; } .ydoc:not(.pdf) .yd-parties.three .info .yd-meta td:last-child { text-align: left; } }
/* middle column (Bill to / Prepared for) sits centred in its third, text still left-aligned */
.yd-parties.three > .to { justify-self: center; width: max-content; max-width: 100%; }
@media (max-width: 640px) { .ydoc:not(.pdf) .yd-parties.three > .to { justify-self: stretch; width: auto; } }
.yd-parties.three > .to { max-width: min(100%, 185px); }
@media (max-width: 640px) { .ydoc:not(.pdf) .yd-parties.three > .to { max-width: none; } }
/* project line: label, name and details share one line box so they sit on the same line */
.yd-proj { align-items: center; }
.yd-proj .yd-k, .yd-proj .pn, .yd-proj .pm { line-height: 18px; display: inline-block; }
.yd-proj .yd-k { padding-top: 1px; }
.ydoc.pdf .yd-proj .yd-k { position: relative; top: 3px; }   /* the PDF renderer draws small caps a touch high */