/* Sizes are in "u" = 1/816 of the page width (1u = 1px on a letter page at 96 dpi). */
html, body { margin: 0; padding: 0; background: #fff; }
:root {
  --u: calc(100vw / 816);
  --ink-1: #16283c; --ink-2: #2c3e50; --ink-3: #5a6b7c; --ink-deep: #0b1b2b;
  --blue-1: #29a8e0; --blue-2: #1b8fcb; --tint: #e9f3fb; --hair: #d3e2ee; --on-dark-3: #a9c2d6;
  font-family: Barlow, Helvetica, Arial, sans-serif; color: var(--ink-1);
  --rp: 4; --kp: 4;
}
.page { box-sizing: border-box; width: 100vw; height: calc(1054 * var(--u)); display: flex; flex-direction: column; overflow: hidden; break-after: page; page-break-after: always; background: #fff; }
.page:last-child { break-after: auto; page-break-after: auto; }

.head { background: var(--ink-deep); color: #fff; padding: calc(13 * var(--u)) calc(38 * var(--u)) calc(11 * var(--u)); display: flex; align-items: flex-end; justify-content: space-between; gap: calc(24 * var(--u)); }
.head-title { font-size: calc(26 * var(--u)); font-weight: 800; letter-spacing: -0.02em; }
.head-kicker { margin-top: calc(5 * var(--u)); font-weight: 700; font-size: calc(10 * var(--u)); letter-spacing: 0.24em; color: var(--blue-1); text-transform: uppercase; }
.head-stamp { font-weight: 700; font-size: calc(8.5 * var(--u)); letter-spacing: 0.28em; color: var(--on-dark-3); text-transform: uppercase; text-align: right; }

.eyebrow { font-weight: 700; font-size: calc(9 * var(--u)); letter-spacing: 0.26em; text-transform: uppercase; color: var(--blue-1); }
.h1 { font-size: calc(20 * var(--u)); font-weight: 700; margin-top: calc(5 * var(--u)); letter-spacing: -0.01em; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(16 * var(--u)); }
.sec-note { font-weight: 700; font-size: calc(8.5 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.sec-note.tight { margin-top: calc(4 * var(--u)); text-align: left; }



.two { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(16 * var(--u)); border-top: 1px solid var(--hair); }
.col { padding: calc(13 * var(--u)) calc(26 * var(--u)) calc(13 * var(--u)) calc(38 * var(--u)); display: flex; flex-direction: column; gap: calc(9 * var(--u)); align-self: start; }
.col.left { border-right: 1px solid var(--hair); }
.col.right { padding: calc(13 * var(--u)) calc(38 * var(--u)) calc(13 * var(--u)) calc(26 * var(--u)); }
.kv { display: flex; flex-direction: column; }
.kv-row { display: flex; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(var(--kp) * var(--u)) 0; border-bottom: 1px solid var(--hair); font-size: calc(12 * var(--u)); }
.kv-k { color: var(--ink-2); }
.kv-v { text-align: right; font-variant-numeric: tabular-nums; }
.kv-row.b .kv-v { font-weight: 700; }
.assume .kv-v, .col.right .kv-v { font-weight: 700; }
.callout { background: var(--tint); border: 1px solid var(--hair); border-radius: calc(6 * var(--u)); padding: calc(12 * var(--u)) calc(15 * var(--u)); }
.callout-label { font-weight: 700; font-size: calc(9 * var(--u)); letter-spacing: 0.26em; text-transform: uppercase; color: var(--blue-2); }
.callout-text { margin-top: calc(6 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.5; color: var(--ink-2); }

.foot { margin-top: auto; border-top: 1px solid var(--hair); padding: calc(10 * var(--u)) calc(38 * var(--u)); display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: calc(8.5 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }
/* Project tier badge: Core (outline), Standard (blue), Premium (navy). On the dark header they invert. */
.tier { display: inline-block; font-weight: 800; font-size: calc(8 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(10 * var(--u)); border: 1px solid; white-space: nowrap; vertical-align: 1px; }
.tier-core { color: #5a6b7c; border-color: #5a6b7c; background: #fff; }
.tier-standard { color: #1b8fcb; border-color: #1b8fcb; background: #e9f3fb; }
.tier-premium { color: #fff; border-color: #0b1b2b; background: #0b1b2b; }
.tier-other { color: #16283c; border-color: #16283c; background: #fff; }
.head .tier { margin-left: calc(10 * var(--u)); }
.head .tier-core { color: #a9c2d6; border-color: #a9c2d6; background: transparent; }
.head .tier-standard { color: #0b1b2b; border-color: #29a8e0; background: #29a8e0; }
.head .tier-premium { color: #0b1b2b; border-color: #fff; background: #fff; }
.head .tier-other { color: #fff; border-color: #fff; background: transparent; }
.tier + .tier { margin-left: calc(6 * var(--u)); }
.head .tier + .tier { margin-left: calc(6 * var(--u)); }
.foot-right { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.foot-partner { height: calc(18 * var(--u)); width: auto; display: block; }
.foot-logo { height: calc(18 * var(--u)); width: auto; display: block; }
@media print { @page { margin: 0; } }

/* Safety net: a property with many cost-basis lines gets tighter rows. */
.page.dense { --rp: 2.5; --kp: 3; }
.page.sparse { --rp: 1.5; --kp: 2; }

.three { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1.12fr; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.three .col { align-self: stretch; }
table.mini { width: 100%; border-collapse: collapse; font-size: calc(10.5 * var(--u)); font-variant-numeric: tabular-nums; }
.mini th { text-align: right; font-weight: 700; font-size: calc(7.5 * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: calc(4 * var(--u)) calc(4 * var(--u)); border-bottom: 1px solid var(--ink-1); }
.mini th:first-child, .mini td:first-child { text-align: left; padding-left: 0; }
.mini td { text-align: right; padding: calc(var(--kp) * var(--u)) calc(4 * var(--u)); border-bottom: 1px solid var(--hair); }
.mini td:last-child, .mini th:last-child { padding-right: 0; }
.mini tr.total td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--ink-1); }
.mini td.neg { color: var(--ink-3); }
.mini td.b { font-weight: 700; }
.mini-foot { font-size: calc(10 * var(--u)); color: var(--ink-3); line-height: 1.45; }
.page.dense .three .col, .page.dense .two .col { padding-top: calc(9 * var(--u)); padding-bottom: calc(9 * var(--u)); gap: calc(6 * var(--u)); }
.page.sparse .three .col, .page.sparse .two .col { padding-top: calc(6 * var(--u)); padding-bottom: calc(6 * var(--u)); gap: calc(4 * var(--u)); }
.page.sparse .callout { padding-top: calc(7 * var(--u)); padding-bottom: calc(7 * var(--u)); }
.pie { width: calc(132 * var(--u)); height: calc(132 * var(--u)); margin: calc(6 * var(--u)) auto 0; }
.sw { display: inline-block; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 2px; margin-right: calc(6 * var(--u)); vertical-align: -1px; border: 1px solid rgba(22, 40, 60, 0.15); box-sizing: border-box; }
.page.dense .pie { width: calc(112 * var(--u)); height: calc(112 * var(--u)); }
.page.sparse .pie { width: calc(92 * var(--u)); height: calc(92 * var(--u)); }
.page > * { flex-shrink: 0; }
.disclaimer { margin: calc(8 * var(--u)) calc(38 * var(--u)) calc(9 * var(--u)); font-size: calc(8.5 * var(--u)); line-height: 1.4; color: var(--ink-3); }
.disclaimer b { color: var(--ink-2); }

/* The PDF service prints the page number 39-59 px above the sheet bottom. The footer band is tall enough to hold it (the
   logo and copyright stay at the bottom), so the number never lands on content above the band. */
.foot { box-sizing: border-box; min-height: calc(62 * var(--u)); padding: 0 calc(38 * var(--u)) calc(10 * var(--u)); align-items: flex-end; }
.foot-logo, .foot-partner { height: calc(30 * var(--u)); }

/* the header text column can shrink, so a long name is fitted (fitHeads in app.js) instead of widening the page */
.head > div:first-child { min-width: 0; flex: 1 1 auto; }

.head-stamp { max-width: 38%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* a long client name takes two lines at most */

/* long unbroken text (a very long name or URL) breaks instead of widening the page */
.page { overflow-wrap: anywhere; }

/* ---- Revision: wider right column for the ten-year table, a pie that fills its column, reclassified row, year tags ---- */
.three { grid-template-columns: 0.85fr 1.35fr; }
.pie { position: relative; flex: 1 1 0; width: auto; height: auto; min-height: calc(110 * var(--u)); margin: calc(4 * var(--u)) 0 0; }
.pie svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.page.dense .pie, .page.sparse .pie { width: auto; height: auto; }
.page.dense .pie { min-height: calc(90 * var(--u)); }
.page.sparse .pie { min-height: calc(70 * var(--u)); }
.mini tr.sub td { font-weight: 700; color: var(--blue-2); }
table.five { font-size: calc(9.5 * var(--u)); }
.five th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.five td:first-child { white-space: nowrap; }
.five td.mute { color: var(--ink-3); }
.five tr.collapsed td { font-style: italic; }
.ytag { font-size: calc(7 * var(--u)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-2); margin-left: calc(3 * var(--u)); }
.five td { padding-top: calc(var(--kp) * 0.8 * var(--u)); padding-bottom: calc(var(--kp) * 0.8 * var(--u)); }
.three { grid-template-columns: 0.78fr 1.42fr; }
.five { table-layout: fixed; }
.five td { white-space: nowrap; padding-left: calc(2 * var(--u)); padding-right: calc(2 * var(--u)); }
.five td:first-child { white-space: normal; padding-left: 0; }
.five th { padding-left: calc(2 * var(--u)); padding-right: calc(2 * var(--u)); }
.five td, .five th { overflow: hidden; }
.mini td { white-space: nowrap; }
.mini td:first-child { white-space: normal; }
.page.dense .five td { padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); }
.page.sparse .five td { padding-top: calc(1 * var(--u)); padding-bottom: calc(1 * var(--u)); }
.col.right .sec-note.tight { letter-spacing: 0.16em; }
.three { grid-template-columns: 0.9fr 1.3fr; }
/* last resort (many studies on one property): the tile captions and the land callout give way */
.page.tight { --rp: 1; --kp: 1.5; }
.page.tight .callout { display: none; }


/* ---- Top of the page: the cost basis as a ledger on the left, the property photo on the right (moved here from the benefit analysis) ---- */
.top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-bottom: 1px solid var(--hair); }
.page.no-photo .top { grid-template-columns: 1fr; }
.basis { padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(14 * var(--u)) calc(38 * var(--u)); border-right: 1px solid var(--hair); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.page.no-photo .basis { border-right: 0; padding-right: calc(38 * var(--u)); }
.ledger { display: flex; flex-direction: column; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: calc(14 * var(--u)); padding: calc(var(--rp) * var(--u)) 0; border-top: 1px solid var(--hair); }
.row.rule { border-top-color: var(--ink-1); }
.row .k { font-size: calc(12.5 * var(--u)); }
.row .s { font-size: calc(10.5 * var(--u)); color: var(--ink-3); margin-left: calc(6 * var(--u)); }
.row .v { font-size: calc(13 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.photo-col { display: flex; flex-direction: column; }
.page.no-photo .photo-col { display: none; }
.photo { position: relative; flex: 1 1 auto; min-height: calc(200 * var(--u)); background: var(--tint) center / cover no-repeat; }
.page.tight .photo { min-height: calc(120 * var(--u)); }

/* bold line that ends the county data (the ratio), and the two-level header over the with-study columns */
.kv-row.rule { border-top: calc(1.5 * var(--u)) solid var(--ink-1); }
.kv-row.rule .kv-k { font-weight: 700; color: var(--ink-1); }
.five thead tr.grp th { border-bottom: 0; padding-bottom: 0; }
.five thead tr.grp th.with { text-align: center; color: var(--blue-2); border-bottom: 1px solid var(--blue-2); }
.five thead tr:last-child th { border-top: 0; }

/* ---- Brand fonts: Poppins body, Montserrat 600 labels and table headers, League Spartan bold headlines; Barlow stays for figures and the client name. */
html, body, button, input, select, textarea { font-family: Poppins, Helvetica, Arial, sans-serif; }
.head-title { font-family: "League Spartan", "Poppins", Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.head-kicker { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.head-stamp { font-family: Barlow, Helvetica, Arial, sans-serif; }
.eyebrow { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.h1 { font-family: "League Spartan", "Poppins", Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.sec-note { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.kv-v { font-family: Barlow, Helvetica, Arial, sans-serif; }
.callout-label { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.foot { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.tier { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
table.mini td:not(:first-child) { font-family: Barlow, Helvetica, Arial, sans-serif; }
.mini th { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.head-stamp { font-family: Barlow, Helvetica, Arial, sans-serif; }
.five th { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.ytag { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.five th { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.col.right .sec-note.tight { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.row .v { font-family: Barlow, Helvetica, Arial, sans-serif; }
.five thead tr.grp th { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.five thead tr.grp th.with { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.five thead tr:last-child th { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.page.tight .three, .page.tight .two, .page.tight .top { zoom: 0.86; }
.kv-v { white-space: nowrap; flex: none; }
.mini td, .five td { font-size: 0.96em; }
.five td:not(:first-child) { font-family: Barlow, Helvetica, Arial, sans-serif; }
.page.sparse .three, .page.sparse .two, .page.sparse .top { zoom: 0.94; }

/* ---- Brand colors: deep navy #002e5b, slate navy #283a54, brand blue #2381bf, medium blue #0b5697. */
:root { --ink-1: #002e5b; --ink-2: #283a54; --ink-deep: #002e5b; --blue-1: #2381bf; --blue-2: #0b5697; }
.tier-standard { color: #0b5697; border-color: #0b5697; }
.tier-premium { border-color: #002e5b; background: #002e5b; }
.tier-other { color: #002e5b; border-color: #002e5b; }
.head .tier-standard { color: #002e5b; border-color: #2381bf; background: #2381bf; }
.head .tier-premium { color: #002e5b; }
.sw { border: 1px solid rgba(0,46,91, 0.15); }