/* ============================================================
   UNLEVERED — Cost Segregation Study · FORMAL document skin
   A restrained, vertical, sectioned report. Pairs with
   report.css (reuses component visuals) + tokens.css.
   Loaded AFTER report.css so these rules win.
   ============================================================ */

body { overflow: auto !important; background: var(--ulv-stone-25); color: var(--text-primary); }

/* ---------- formal top bar ---------- */
.docbar {
  height: 58px; background: var(--ulv-forest-900); color: var(--ulv-white);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  padding: 0 24px; position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.docbar-brand { display: flex; align-items: center; gap: 11px; }
.docbar-mark { width: 30px; height: 30px; background: var(--ulv-white); color: var(--ulv-forest-900); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.docbar-firm { font-weight: 600; font-size: 14px; line-height: 1.05; }
.docbar-sub { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; margin-top: 2px; text-transform: uppercase; }
.docbar-title { text-align: center; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.9); }
.docbar-title .s { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; margin-top: 2px; text-transform: uppercase; }
.docbar-actions { display: flex; gap: 8px; align-items: center; }
.db-btn { height: 34px; padding: 0 14px; cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,0.22); color: var(--ulv-white); font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.db-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.45); }
.db-btn--primary { background: var(--ulv-white); color: var(--ulv-forest-900); border-color: var(--ulv-white); }
.db-btn--primary:hover { background: var(--ulv-stone-50); }

/* ---------- layout: TOC + canvas ---------- */
.doc-wrap { display: grid; grid-template-columns: 248px minmax(0, 1fr); max-width: 1300px; margin: 0 auto; align-items: start; }
@media (max-width: 1080px) { .doc-wrap { grid-template-columns: 1fr; } .toc { display: none; } }

.toc { position: sticky; top: 58px; height: calc(100vh - 58px); overflow-y: auto; padding: 38px 26px; border-right: 1px solid var(--border-subtle); background: var(--surface-raised); }
.toc-eyebrow { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-tertiary); margin-bottom: 16px; }
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.toc a { display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; color: var(--text-secondary); text-decoration: none; border-left: 2px solid transparent; font-size: 12.5px; line-height: 1.4; }
.toc a .toc-n { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); line-height: 1.55; flex: none; width: 16px; }
.toc a.is-gate { color: var(--ulv-terra-700); font-weight: 500; }
.toc a.is-gate .toc-n { color: var(--ulv-terra-600); }
.toc a:hover { color: var(--text-primary); }
.toc a.is-current { background: var(--ulv-forest-50); color: var(--ulv-forest-800); font-weight: 500; border-left-color: var(--ulv-forest-700); }
.toc-divider { height: 1px; background: var(--border-subtle); margin: 22px 0 18px; }
.toc-deliv { display: flex; flex-direction: column; gap: 9px; font-size: 12px; color: var(--text-secondary); }
.toc-deliv > div { display: flex; align-items: center; gap: 9px; }
.toc-deliv u-icon { color: var(--text-tertiary); flex: none; }

.canvas { padding: 44px 48px 120px; }
.sheet { background: var(--ulv-white); border: 1px solid var(--border-default); box-shadow: 0 12px 32px rgba(15,35,28,0.06); max-width: 880px; margin: 0 auto; }

/* ---------- cover (branding) ---------- */
.cover-formal { padding: 56px 64px 0; }
.cover-firm { display: flex; align-items: center; gap: 13px; margin-bottom: 38px; }
.cover-firm .m { width: 38px; height: 38px; background: var(--ulv-forest-900); color: var(--ulv-white); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.cover-firm .nm { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.cover-firm .pw { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 2px; }
.cover-firm .badge { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; padding: 0; height: auto; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-secondary); white-space: nowrap; }
.cover-firm .badge u-icon { display: inline-flex; color: var(--ulv-forest-600); }
.cover-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ulv-terra-600); margin-bottom: 14px; }
.cover-formal h1 { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1.0; letter-spacing: -0.025em; color: var(--text-primary); max-width: none; }
.cover-formal h1 em { font-style: normal; color: var(--ulv-forest-600); }
.cover-addr { font-size: 17px; color: var(--text-secondary); margin-top: 14px; text-wrap: pretty; }
.cover-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--border-subtle); }
.cover-meta .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
.cover-meta .v { font-size: 14px; color: var(--text-primary); margin-top: 5px; font-variant-numeric: tabular-nums; }
.cover-banner { margin-top: 28px; width: 100%; aspect-ratio: 1448 / 1086; background-color: var(--ulv-white); background-size: contain; background-repeat: no-repeat; background-position: center; }
.cover-formal .exec-hero { margin-top: 22px; }

/* ---------- section structure ---------- */
.sec { padding: 52px 64px; border-top: 1px solid var(--border-subtle); }
.sec:first-of-type { border-top: 0; }
.sec-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 10px; }
.sec-h2 { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.08; letter-spacing: -0.02em; color: var(--text-primary); }
.sec-h2 em { font-style: normal; color: inherit; }
.subsec { border-top: 1px solid var(--border-default); margin-top: 30px; padding-top: 16px; }
.subsec-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ulv-terra-600); }
.sec-lead { font-size: 15.5px; color: var(--text-secondary); line-height: 1.55; max-width: none; text-wrap: pretty; margin-top: 14px; }
.sec-sub { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--text-primary); margin: 34px 0 14px; letter-spacing: -0.01em; }

/* appendix tint */
.sec--appendix { background: var(--ulv-stone-25); }

/* ---------- exec summary tweaks for sheet ---------- */
.sec .exec-hero { margin-top: 24px; }

/* with/without compare reused (.compare) — give top margin */
.sec .compare { margin-top: 16px; }
.sec .sched { margin-top: 8px; }

/* ---------- donut duo (component + room) ---------- */
.donut-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }
@media (max-width: 720px) { .donut-duo { grid-template-columns: 1fr; } }
.donut-block { border: 1px solid var(--border-default); padding: 24px; background: var(--surface-raised); }
.donut-block .cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 16px; }
.donut-block .dwrap { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.donut-block .dwrap .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut-block .dwrap .center .v { font-weight: 600; font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.donut-block .dwrap .center .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 2px; white-space: nowrap; }
.donut-block .legend { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.donut-block .legend .li { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; font-size: 12.5px; }
.donut-block .legend .dot { width: 9px; height: 9px; }
.donut-block .legend .amt { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); white-space: nowrap; }

/* driver breakdown row (concrete to this study) */
.driver-row { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: center; margin-top: 24px; }
@media (max-width: 720px) { .driver-row { grid-template-columns: 1fr; } }
.driver-row .dwrap { position: relative; width: 200px; height: 200px; }
.driver-row .dwrap .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.driver-row .dwrap .center .v { font-weight: 600; font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.driver-row .dwrap .center .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 2px; white-space: nowrap; }

/* ---------- property appendix photo ---------- */
.prop-appendix { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: start; margin-top: 20px; }
@media (max-width: 720px) { .prop-appendix { grid-template-columns: 1fr; } }
.prop-appendix .photo { aspect-ratio: 4/3; background-size: cover; background-position: center; border: 1px solid var(--border-default); }

/* ---------- powered footer ---------- */
.doc-foot { border-top: 1px solid var(--border-subtle); padding: 22px 64px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-tertiary); }
.doc-foot .l { display: inline-flex; align-items: center; gap: 8px; }
.doc-foot .r { display: inline-flex; gap: 14px; align-items: center; }
.doc-foot a { color: inherit; }

/* ---------- component source tag ---------- */
.src-tag { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); letter-spacing: 0.02em; }

/* ---------- room accordion ---------- */
.room-acc-list { border: 1px solid var(--border-default); margin-top: 6px; }
.room-acc { border-bottom: 1px solid var(--border-subtle); }
.room-acc:last-child { border-bottom: 0; }
.room-acc-head { width: 100%; appearance: none; background: var(--surface-raised); border: 0; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto auto 40px 16px; gap: 12px; align-items: center; padding: 13px 16px; text-align: left; }
.room-acc-head:hover { background: var(--ulv-stone-25); }
.room-acc-head .dot { width: 9px; height: 9px; }
.room-acc-head .nm { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.room-acc-head .rec { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
.room-acc-head .amt { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.room-acc-head .pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); text-align: right; }
.room-acc-head .chev { color: var(--text-tertiary); transition: transform var(--duration-fast) var(--ease-out); }
.room-acc.is-open .room-acc-head .chev { transform: rotate(180deg); }
.room-acc.is-open .room-acc-head { background: var(--ulv-forest-50); }
.room-acc-body { display: none; padding: 6px 18px 14px 37px; background: var(--ulv-stone-25); border-top: 1px solid var(--border-subtle); }
.room-acc.is-open .room-acc-body { display: block; }
.ra-item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.ra-item:last-child { border-bottom: 0; }
.ra-item .nm { color: var(--text-primary); }
.ra-item .src { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.ra-item .rec { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; }
.ra-item .amt { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-primary); min-width: 64px; text-align: right; }

/* ---------- allocation treemap (graph, icon per area) ---------- */
.tmap { display: flex; gap: 4px; height: 380px; margin-top: 10px; }
.tmap-col { display: flex; flex-direction: column; gap: 4px; }
.tmap-tile { appearance: none; border: 0; cursor: pointer; color: var(--ulv-white); padding: 15px 16px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; overflow: hidden; transition: filter var(--duration-fast) var(--ease-out); min-height: 0; }
.tmap-tile:hover { filter: brightness(1.08); }
.tmap-tile .tt-top { display: flex; align-items: center; gap: 9px; }
.tmap-tile .tt-ic { width: 22px; height: 22px; flex: none; opacity: 0.95; }
.tmap-tile.small .tt-ic { width: 18px; height: 18px; }
.tmap-tile .tt-ic svg { width: 100%; height: 100%; display: block; }
.tmap-tile .tt-nm { font-size: 13.5px; font-weight: 600; line-height: 1.15; }
.tmap-tile.small .tt-nm { font-size: 12.5px; }
.tmap-tile .tt-amt { font-weight: 600; font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tmap-tile.small { padding: 12px 14px; }
.tmap-tile.small .tt-amt { font-size: 17px; }
.tmap-tile .tt-pct { font-family: var(--font-mono); font-size: 11px; opacity: 0.82; margin-left: 7px; }

/* ---------- allocation bar table (drill-down) ---------- */
.atable { width: 100%; border-collapse: collapse; margin-top: 8px; }
.atable thead th { text-align: left; font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); padding: 0 0 11px; }
.atable thead th.num { text-align: right; }
.atable .barcell { width: 38%; padding: 0 20px !important; }
.atable .arow { cursor: pointer; }
.atable .arow > td { padding: 13px 0; border-top: 1px solid var(--border-subtle); vertical-align: middle; }
.atable .arow:hover > td { background: var(--ulv-stone-25); }
.atable .nm { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
.atable .nm .ic { width: 18px; height: 18px; flex: none; color: var(--text-secondary); }
.atable .nm .ic svg { width: 100%; height: 100%; display: block; }
.atable .bar { height: 13px; background: var(--ulv-stone-100); }
.atable .bar > i { display: block; height: 100%; }
.atable .amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.atable .pct { text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }
.atable .chev { text-align: right; color: var(--text-tertiary); width: 26px; }
.atable .arow .chev u-icon { transition: transform var(--duration-fast) var(--ease-out); }
.atable .arow.is-open .chev u-icon { transform: rotate(180deg); }
.atable .adetail > td { padding: 0; border: 0; }
.atable .adetail .inner { display: none; padding: 4px 0 14px 28px; }
.atable .arow.is-open + .adetail .inner { display: block; }
.atable .di { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.atable .di:last-child { border-bottom: 0; }
.atable .di .src { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.atable .di .rec { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; }
.atable .di .amt2 { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; color: var(--text-primary); }

/* ---------- benefit build-up (inputs) ---------- */
.buildup-bar { display: flex; height: 58px; gap: 2px; margin-top: 14px; }
.buildup-seg { color: var(--ulv-white); display: flex; flex-direction: column; justify-content: center; padding: 0 10px; overflow: hidden; min-width: 62px; }
.buildup-seg .s-amt { font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.buildup-seg .s-nm { font-size: 11px; opacity: 0.92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buildup-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border-default); }
.buildup-total .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.buildup-total .v { font-weight: 600; font-size: 30px; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--text-primary); }
#input-legend { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; }
@media (max-width: 680px) { #input-legend { grid-template-columns: 1fr; } }
.bl-item { display: grid; grid-template-columns: 12px 1fr; gap: 11px; align-items: start; }
.bl-dot { width: 12px; height: 12px; margin-top: 4px; }
.bl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bl-nm { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.bl-fig { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.bl-pct { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-tertiary); margin-left: 7px; }
.bl-bar { height: 5px; background: var(--ulv-stone-100); margin: 7px 0 8px; }
.bl-bar > i { display: block; height: 100%; }
.bl-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }

/* ---------- deduction ledger ---------- */
.ledger { width: 100%; border-collapse: collapse; margin-top: 10px; font-variant-numeric: tabular-nums; }
.ledger th { text-align: left; font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); padding: 0 0 11px; }
.ledger th.num { text-align: right; }
.ledger td { padding: 12px 14px 12px 0; border-top: 1px solid var(--border-subtle); font-size: 14px; color: var(--text-primary); }
.ledger .det { white-space: normal; }
.ledger th.num:not(:last-child), .ledger td.num:not(:last-child) { padding-right: 30px; }
.ledger td.num { text-align: right; font-family: var(--font-mono); font-size: 12.5px; }
.ledger .yr { font-family: var(--font-display); font-size: 17px; white-space: nowrap; }
.ledger .det { color: var(--text-tertiary); font-size: 12.5px; }
.ledger tr.y1 td { background: var(--ulv-forest-50); font-weight: 600; }
.ledger tr.y1 td.num { color: var(--ulv-forest-800); }
.ledger tr.tot td { border-top: 2px solid var(--text-primary); border-bottom: 3px double var(--text-primary); font-weight: 600; }
.ledger .pill { display: inline-block; margin-left: 9px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ulv-forest-800); color: var(--ulv-white); padding: 2px 7px; vertical-align: middle; }
.ledger-note { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.ledger-note u-icon { color: var(--ulv-forest-700); flex: none; }
.ledger-note strong { color: var(--ulv-forest-800); font-weight: 600; }

/* ---------- sign & pay gate ---------- */
.sec--gate { background: var(--ulv-forest-900); color: var(--ulv-white); border-top: 0; }
.gate-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ulv-terra-300); margin-bottom: 12px; }
.gate-h { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.12; letter-spacing: -0.02em; color: var(--ulv-white); max-width: none; text-wrap: balance; }
.gate-h em { font-style: normal; color: var(--ulv-terra-300); display: inline-block; white-space: nowrap; }
.gate-lead { font-size: 15px; color: rgba(255,255,255,0.78); line-height: 1.55; max-width: none; text-wrap: pretty; margin-top: 14px; }
.gate-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 28px; margin-top: 30px; align-items: start; }
@media (max-width: 820px) { .gate-grid { grid-template-columns: 1fr; } }
.gate-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
@media (max-width: 520px) { .gate-includes { grid-template-columns: 1fr; } }
.gate-inc { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,0.9); align-items: start; }
.gate-inc .tick { width: 18px; height: 18px; background: rgba(255,255,255,0.12); color: var(--ulv-terra-300); display: grid; place-items: center; margin-top: 1px; }
.gate-pay { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); padding: 22px; }
.gate-pay .row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 13px; }
.gate-pay .row:first-child { padding-top: 0; }
.gate-pay .row .k { color: rgba(255,255,255,0.72); display: inline-flex; align-items: center; gap: 8px; }
.gate-pay .row .v { font-family: var(--font-mono); font-size: 12.5px; }
.gate-pay .row .tick { width: 16px; height: 16px; background: var(--ulv-terra-300); color: var(--ulv-forest-900); display: grid; place-items: center; }
.gate-pay .total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 16px; }
.gate-pay .total .k { font-size: 13px; color: rgba(255,255,255,0.72); }
.gate-pay .total .v { font-weight: 600; font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gate-pay .btn-pay { width: 100%; height: 46px; background: var(--ulv-white); color: var(--ulv-forest-900); border: 0; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.gate-pay .btn-pay:hover { background: var(--ulv-stone-50); }
.gate-pay .sub { font-size: 11px; color: rgba(255,255,255,0.55); text-align: center; margin-top: 10px; line-height: 1.4; }

/* ---------- engineered review standard (process, not a person) ---------- */
.review-standard { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border-default); margin-top: 18px; }
@media (max-width: 760px) { .review-standard { grid-template-columns: 1fr 1fr; } }
.rs-item { padding: 18px 16px; border-right: 1px solid var(--border-subtle); }
.rs-item:last-child { border-right: 0; }
.rs-item .ic { width: 30px; height: 30px; background: var(--ulv-forest-100); color: var(--ulv-forest-800); display: grid; place-items: center; margin-bottom: 10px; }
.rs-item h5 { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.rs-item p { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; margin: 0; }

/* ---------- allocation rollup (year -> room -> component) ---------- */
.roll { border: 1px solid var(--border-default); margin-top: 8px; }
.roll-l1 { border-bottom: 1px solid var(--border-subtle); }
.roll-l1:last-child { border-bottom: 0; }
.roll-l1-head { width: 100%; appearance: none; background: var(--surface-raised); border: 0; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto auto 44px 16px; gap: 12px; align-items: center; padding: 14px 16px; text-align: left; }
.roll-l1-head:hover { background: var(--ulv-stone-25); }
.roll-l1-head .dot { width: 10px; height: 10px; }
.roll-l1-head .nm { font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.roll-l1-head .rec { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
.roll-l1-head .amt { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.roll-l1-head .pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); text-align: right; }
.roll-l1-head .chev1 { color: var(--text-tertiary); transition: transform var(--duration-fast) var(--ease-out); }
.roll-l1.is-open .roll-l1-head .chev1 { transform: rotate(180deg); }
.roll-l1.is-open .roll-l1-head { background: var(--ulv-forest-50); }
.roll-l1-body { display: none; padding: 2px 16px 8px 38px; background: var(--ulv-stone-25); border-top: 1px solid var(--border-subtle); }
.roll-l1.is-open .roll-l1-body { display: block; }
.roll-l2 { border-bottom: 1px solid var(--border-subtle); }
.roll-l2:last-child { border-bottom: 0; }
.roll-l2-head { width: 100%; appearance: none; background: transparent; border: 0; cursor: pointer; display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding: 11px 0; text-align: left; }
.roll-l2-head .nm { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.roll-l2-head .amt { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.roll-l2-head .chev2 { color: var(--text-tertiary); transition: transform var(--duration-fast) var(--ease-out); }
.roll-l2.is-open .chev2 { transform: rotate(90deg); }
.roll-l2-body { display: none; padding: 0 0 8px 26px; }
.roll-l2.is-open .roll-l2-body { display: block; }
.roll-item { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; }
.roll-item:last-child { border-bottom: 0; }
.roll-item .nm { color: var(--text-primary); }
.roll-item .src { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.roll-item .amt { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-primary); min-width: 64px; text-align: right; }
.roll-shell-note { font-size: 12px; color: var(--text-secondary); line-height: 1.5; padding: 8px 0 4px; }

/* ---------- disposition accordion (remodel) ---------- */
.dispo-head { display: grid; grid-template-columns: 1fr 120px 120px 120px 26px; gap: 14px; padding: 0 16px 10px; font-family: var(--font-body); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); }
.dispo-head .num { text-align: right; }
.dispo-acc { border: 1px solid var(--border-default); margin-top: 0; }
.dispo-row { border-bottom: 1px solid var(--border-subtle); }
.dispo-row:last-child { border-bottom: 0; }
.dispo-row-head { width: 100%; appearance: none; background: var(--surface-raised); border: 0; cursor: pointer; display: grid; grid-template-columns: 1fr 120px 120px 120px 26px; gap: 14px; align-items: center; padding: 13px 16px; text-align: left; font-variant-numeric: tabular-nums; }
.dispo-row-head:hover { background: var(--ulv-stone-25); }
.dispo-row-head .nm { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.dispo-row-head .num { text-align: right; font-size: 13.5px; color: var(--text-secondary); }
.dispo-row-head .num.tot { font-weight: 600; color: var(--text-primary); }
.dispo-row-head .chev { color: var(--text-tertiary); justify-self: center; transition: transform var(--duration-fast) var(--ease-out); }
.dispo-row.is-open .dispo-row-head { background: var(--ulv-forest-50); }
.dispo-row.is-open .dispo-row-head .chev { transform: rotate(180deg); }
.dispo-row-body { display: none; padding: 12px 16px 14px 16px; background: var(--ulv-stone-25); border-top: 1px solid var(--border-subtle); font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.dispo-row.is-open .dispo-row-body { display: block; }
.dispo-row-body .lbl { font-weight: 600; color: var(--text-primary); }
.dispo-row.total .dispo-row-head { background: var(--ulv-forest-50); }
.dispo-row.total .dispo-row-head .nm { font-weight: 600; }

/* image-slot drop targets inside photo frames */
.verify-photo { position: relative; }
.verify-photo .slot, .ba-frame .slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.verify-photo .tag, .ba-frame .stamp { pointer-events: none; z-index: 3; }
.ba-frame { position: relative; }
.ba-stamp--before { background: var(--ulv-stone-200); color: var(--ulv-forest-800); }
.ba-stamp--after { background: var(--ulv-forest-700); color: var(--ulv-white); }

/* mechanism chips (demo): toggle remodel / lookback inputs */
.mech-chips { display: inline-flex; align-items: center; gap: 6px; }
/* Demo-only controls: the input chips and CPA/Client toggle are scaffolding for
   reviewing states. Hidden by default; add ?demo=1 (sets body.demo) to reveal. */
body:not(.demo) .mech-chips, body:not(.demo) .access-toggle { display: none !important; }
.mech-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-right: 2px; }
.mech-chip { height: 30px; padding: 0 11px 0 9px; cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.6); font-family: var(--font-body); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.mech-chip u-icon { opacity: 0; transition: opacity var(--duration-fast); }
.mech-chip.is-on { background: var(--ulv-white); color: var(--ulv-forest-900); border-color: var(--ulv-white); }
.mech-chip.is-on u-icon { opacity: 1; }

/* ---------- mobile / responsive (screen only, never print) ---------- */
@media screen and (max-width: 860px) {
  .docbar { grid-template-columns: auto 1fr auto; gap: 10px; padding: 0 14px; }
  .docbar-title { display: none; }
  .docbar-sub { display: none; }
  .db-btn { height: 32px; padding: 0 10px; font-size: 12px; }
  .docbar .db-btn--primary { display: none; }
  .access-toggle button { padding: 0 9px; }
  .studytype-toggle, .mech-chips { display: none; }
}
@media screen and (max-width: 760px) {
  .canvas { padding: 18px 12px 80px; }
  .cover-formal { padding: 26px 18px 0; }
  .cover-firm { flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
  .cover-firm .badge { margin-left: 0; }
  .cover-formal h1 { font-size: 30px; }
  .cover-addr { font-size: 15px; }
  .cover-meta { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
  .cover-banner { margin-top: 24px; }

  .sec { padding: 30px 18px; }
  .sec-h2 { font-size: 23px; }
  .sec-lead { font-size: 14px; }
  .sec-sub { font-size: 17px; margin: 26px 0 12px; }

  .exec-hero { padding: 24px 20px; }
  .exec-hero .num { font-size: 44px; }
  .exec-rows { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .compare { grid-template-columns: 1fr; }

  .buildup-bar { height: 50px; }
  .buildup-seg .s-amt { font-size: 13px; }
  .buildup-total .v { font-size: 24px; }

  .dtable, .ledger, .atable { font-size: 12px; }
  .dtable td, .dtable th { padding: 9px 6px; }
  .ledger th:nth-child(4), .ledger td:nth-child(4) { display: none; }
  #sec-allocation .dtable th:nth-child(4), #sec-allocation .dtable td:nth-child(4),
  #sec-allocation .dtable th:nth-child(6), #sec-allocation .dtable td:nth-child(6) { display: none; }
  #sec-sources .dtable th:nth-child(3), #sec-sources .dtable td:nth-child(3) { display: none; }
  #sec-drivers .dtable th:nth-child(4), #sec-drivers .dtable td:nth-child(4) { display: none; }
  .atable thead th.barcell, .atable .arow td.barcell { display: none; }
  .atable .di { grid-template-columns: 1fr auto auto; gap: 10px; }
  .atable .di .rec { display: none; }
  .cite-table td:first-child { width: auto; }
  .dispo-head { grid-template-columns: 1fr 64px 64px 64px 20px; gap: 7px; padding: 0 12px 8px; font-size: 9px; letter-spacing: 0.06em; }
  .dispo-row-head { grid-template-columns: 1fr 64px 64px 64px 20px; gap: 7px; padding: 11px 12px; }
  .dispo-row-head .nm, .dispo-row-head .num { font-size: 12px; }
  .dispo-row-body { padding: 10px 12px; }

  .tmap { flex-direction: column; height: auto; }
  .tmap-col { flex: 0 0 auto !important; }
  .tmap-tile { flex: 0 0 auto !important; min-height: 76px; }
  .tmap-tile.small { min-height: 64px; }

  .gate-h { font-size: 24px; }
  .review-banner { grid-template-columns: 56px 1fr; }
  .review-banner .meta { grid-column: 1 / -1; text-align: left; }
}
@media screen and (max-width: 480px) {
  .cover-meta { grid-template-columns: 1fr; }
  .exec-rows { grid-template-columns: 1fr; }
  .qa-pipeline { grid-template-columns: 1fr; }
  .review-standard { grid-template-columns: 1fr; }
  .comp-item { grid-template-columns: 1fr; gap: 6px; }
  .access-toggle { display: none; }
}

/* ---------- print: one section per page, compact ---------- */
@media print {
  @page { size: letter portrait; margin: 0.4in; }
  html, body { background: var(--ulv-white); overflow: visible !important; }
  body { font-size: 11px; }
  .docbar, .toc { display: none !important; }
  .doc-wrap { display: block; max-width: none; }
  .canvas { padding: 0; }
  .sheet { box-shadow: none; border: 0; max-width: none; }

  /* cover gets page 1 to itself; everything else FLOWS continuously (no forced
     per-section breaks — that was the source of the white gaps) */
  .cover-formal { padding: 0 0 16px; break-after: page; page-break-after: always; }
  .cover-banner { aspect-ratio: auto; height: 300px; margin-top: 18px; background-size: contain; }
  .sec { padding: 0; margin-top: 26px; }
  .sec:first-of-type { margin-top: 0; }
  .sec--gate { display: none !important; }   /* sign & pay is a screen CTA, not PDF content */

  /* never strand a heading at the foot of a page */
  .sec-eyebrow { margin-bottom: 6px; break-after: avoid; page-break-after: avoid; }
  .sec-h2 { font-size: 22px; break-after: avoid; page-break-after: avoid; }
  .sec-lead { font-size: 12px; margin-top: 8px; }
  .sec-sub { font-size: 14px; margin: 16px 0 8px; break-after: avoid; page-break-after: avoid; }

  /* compact data blocks */
  .exec-hero { padding: 20px 22px; }
  .exec-hero .num { font-size: 44px; }
  .exec-hero .sub { font-size: 12px; }
  .dtable, .ledger, .atable { font-size: 11px; }
  .dtable td, .dtable th { padding: 7px 8px; }
  .ledger td { padding: 8px 14px 8px 0; }
  .tmap { height: 250px; }
  .qa-stage p { font-size: 10px; }
  .comp-item { padding: 7px 0; }

  /* expand ALL drill-downs so every line item prints (down to sub-component) */
  .room-acc-body, .atable .adetail .inner,
  .roll-l1-body, .roll-l2-body, .dispo-row-body { display: block !important; }
  .room-acc .chev, .roll-l1 .chev1, .roll-l2 .chev2, .atable .chev, .dispo-row .chev { display: none !important; }

  /* keep only SMALL atomic units whole; large tables/rollups flow & split to fill pages */
  .exec-hero, .compare, .buildup, .ledger-note, .review-banner,
  .ba-card, .verify-card, .qa-stage, .roll-l1-head, .roll-l2, .roll-item, .ra-item,
  .comp-item, .dtable tr, .ledger tr, table thead, .dispo-row { break-inside: avoid; }
  thead { display: table-header-group; }   /* repeat table headers across page breaks */

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media print {
  .roll-l1-head, .roll-l2-head { display: flex !important; align-items: baseline !important; justify-content: flex-start !important; gap: 12px !important; }
  .roll-l1-head .nm, .roll-l2-head .nm { white-space: nowrap !important; flex: 1 1 auto !important; min-width: 0 !important; }
  .roll-l1-head .dot { flex: 0 0 auto !important; align-self: center !important; }
  .roll-l1-head .rec, .roll-l1-head .pct, .roll-l1-head .amt, .roll-l2-head .amt { flex: 0 0 auto !important; white-space: nowrap !important; }
  .roll-l1-head .amt, .roll-l2-head .amt { margin-left: auto !important; }
}