:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1d3c8f;
  background: #c9cfc8;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  --paper: #fdfdfb;
  --pencil: #5f636a;
  --row-height: 32px;
}

* { box-sizing: border-box; }
body { margin: 0; padding: 46px 28px; }
.napkin {
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 48px 30px;
  background: var(--paper);
  transform: rotate(-0.4deg);
  box-shadow: 0 2px 3px #3540351a, 0 12px 25px -12px #35403552, 2px 24px 52px -25px #3540355c;
}

/* A pressed dot band and two faint quarter-folds, all drawn locally. */
.napkin::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12px;
  border: 8px solid transparent;
  border-image: repeating-radial-gradient(circle at 2px 2px, #75817525 0 0.65px, transparent 1px 4px) 8 round;
  pointer-events: none;
}
.napkin::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), #5f636a05 50%, #ffffff80 calc(50% + 1px), transparent calc(50% + 3px)),
    linear-gradient(0deg, transparent calc(50% - 1px), #5f636a07 50%, #ffffff80 calc(50% + 1px), transparent calc(50% + 3px));
  pointer-events: none;
}
header { order: -3; margin-bottom: 35px; }
#shared-banner { order: -4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid #5f636a38; color: var(--pencil); font-size: 14px; line-height: 1.6; }
#shared-banner[hidden] { display: none; }
h1 { margin: 0 0 6px; font-size: 44px; line-height: 1.12; font-weight: 650; font-style: italic; letter-spacing: -2px; }
header p { margin: 0; color: var(--pencil); font-size: 15px; line-height: 1.6; }
.print-heading, #print-lines { display: none; }
.saved-deals { order: -2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin: -12px 0 26px; color: var(--pencil); }
.saved-deals h2 { margin: 0; font-size: 13px; font-weight: 400; }
#deals { display: flex; flex: 1 1 280px; flex-wrap: wrap; gap: 0 20px; min-width: 0; }
.saved-deals button { max-width: 100%; padding: 7px 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
#deals button { font-size: 15px; font-style: italic; }
#deals [aria-current="true"] { color: #1d3c8f; text-decoration: underline; text-underline-offset: 4px; }
.saved-deals button:hover { text-decoration: underline; text-underline-offset: 4px; }
.saved-deals button:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 3px; }
.saved-deals button:disabled { opacity: 0.6; text-decoration: none; cursor: default; }
.deal-actions { display: flex; flex-wrap: wrap; gap: 0 18px; }
#save-warning { flex-basis: 100%; min-width: 0; margin: 8px 0 0; color: #b22a22; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#save-warning a { color: #1d3c8f; text-underline-offset: 3px; }
#save-warning a:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 3px; }
#delete-status { flex-basis: 100%; margin: 0; font-size: 13px; }
#undo-delete { color: #1d3c8f; text-decoration: underline; text-underline-offset: 3px; }
#compare[aria-expanded="true"] { color: #1d3c8f; text-decoration: underline; text-underline-offset: 4px; }
#history[aria-expanded="true"] { color: #1d3c8f; text-decoration: underline; text-underline-offset: 4px; }
#history-list { flex-basis: 100%; min-width: 0; max-height: 240px; overflow-y: auto; margin: 8px 0 0; padding: 4px; list-style: none; font-size: 13px; line-height: 1.6; }
#history-list[hidden] { display: none; }
#history-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding: 6px 0; border-top: 1px solid #5f636a38; }
#history-list li > span { min-width: 0; overflow-wrap: anywhere; }
#history-list time, #history-list .history-noi { display: block; }
#history-list .history-noi > span { color: #1d3c8f; }
#history-list small { display: block; font-size: 12px; }
#history-list [data-restore] { flex-shrink: 0; color: #1d3c8f; text-decoration: underline; text-underline-offset: 3px; }
#comparison { order: -2; min-width: 0; margin: -6px 0 28px; }
/* After the deal and its years, so the notepad stays at the top; the footer stays last. */
#portfolio { order: 1; min-width: 0; width: 100%; max-width: 440px; margin: 40px 0 28px; }
main > footer { order: 2; }
#portfolio .portfolio-count, #portfolio-note { margin: -4px 0 12px; color: var(--pencil); font-size: 13px; line-height: 1.6; }
#portfolio-note { margin-top: 12px; }
#portfolio-places { margin-top: 18px; }
#portfolio-places thead th { white-space: normal; }
#portfolio-places th:first-child { padding-left: 0; text-align: left; white-space: normal; }
#portfolio-places tr > :last-child { padding-right: 0; }
#portfolio-places button { text-align: left; }
#portfolio-places td { color: #1d3c8f; }
#portfolio-places td.bad-news { color: #b22a22; }
.portfolio-actions { display: flex; flex-wrap: wrap; gap: 0 18px; }
.comparison-note { margin: -4px 0 14px; color: var(--pencil); font-size: 13px; line-height: 1.6; }
.comparison-scroll { max-width: 100%; overflow-x: auto; }
.comparison-scroll:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 4px; }
#comparison table { width: max-content; min-width: 100%; }
#comparison th, #comparison td { padding: 10px 18px; }
#comparison tr > :first-child { position: sticky; left: 0; z-index: 1; padding-left: 0; background: var(--paper); text-align: left; }
#comparison tr > :last-child { padding-right: 0; }
#comparison thead th:not(:first-child) { min-width: 150px; max-width: 260px; white-space: normal; }
#comparison button, #portfolio button { max-width: 100%; padding: 4px 0; border: 0; border-radius: 0; background: transparent; color: #1d3c8f; font: inherit; font-style: italic; overflow-wrap: anywhere; cursor: pointer; }
#comparison button:hover, #portfolio button:hover { text-decoration: underline; text-underline-offset: 4px; }
#comparison button:focus-visible, #portfolio button:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 3px; }
#comparison [data-best="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
#comparison [data-bad="true"] { color: #b22a22; text-decoration: underline wavy #b22a22; text-decoration-thickness: 1px; }
/* Keep the editor early in keyboard order while examples sit near the deals. */
#starter-home { order: -1; }
#jump-examples { display: none; }
.starters { margin: -10px 0 22px; color: var(--pencil); font-size: 13px; line-height: 1.8; }
.starters button { padding: 5px 0; border: 0; border-radius: 0; background: transparent; color: #1d3c8f; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.starters button:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 3px; }
.listing-tools { margin: -12px 0 22px; font-size: 13px; }
.listing-tools button { padding: 6px 0; border: 0; border-radius: 0; background: transparent; color: #1d3c8f; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.listing-tools button:focus-visible, #listing-text:focus-visible, #draft input:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 3px; }
.listing-tools button:disabled { color: var(--pencil); text-decoration: none; cursor: default; }
#listing-panel { max-width: 680px; margin-top: 10px; padding: 12px 0 0; border-top: 1px solid #5f636a38; }
#listing-panel > label { display: block; margin-bottom: 6px; color: var(--pencil); }
#listing-text { display: block; width: 100%; padding: 8px; border: 1px solid #5f636a60; border-radius: 0; background: transparent; color: #1d3c8f; font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }
#listing-hint { margin: 6px 0; color: var(--pencil); line-height: 1.5; }
#draft { margin: 8px 0; line-height: 1.5; overflow-wrap: anywhere; }
#draft ul { max-height: 280px; overflow-y: auto; margin: 0; padding: 0 6px 0 0; list-style: none; }
#draft label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 8px; padding: 7px 3px; cursor: pointer; }
#draft input { margin: 3px 0 0; accent-color: #1d3c8f; }
#draft [data-draft-fix] { margin-left: 31px; }
#draft [data-draft-input] { grid-column: 2; width: 100%; min-width: 0; margin: 0; padding: 4px; border: 1px solid #5f636a60; border-radius: 0; background: transparent; color: #1d3c8f; font: inherit; font-size: 16px; }
#draft small { grid-column: 2; color: var(--pencil); font-size: 12px; }
#empty-deal { order: -1; margin: 22px 0; }
#empty-deal p { margin: 0 0 8px; color: var(--pencil); font-size: 16px; line-height: 1.6; }
#empty-deal .starters { margin: 0; font-size: 15px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 40px; }
.notepad, .tally { min-width: 0; }
#verdict { margin: 0 0 24px; color: var(--pencil); font-size: 14px; font-style: italic; line-height: 1.6; overflow-wrap: anywhere; }
.verdict-headline { color: #1d3c8f; font-size: 16px; font-weight: 600; }
#verdict small { display: block; margin-top: 5px; font-size: 12px; }
#verdict[data-verdict="no"] .verdict-headline { color: #b22a22; text-decoration: underline wavy; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#way-out, #write-it-in { margin: 0 0 24px; color: var(--pencil); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
#missing { margin: 0 0 24px; color: var(--pencil); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#missing h2 { margin-bottom: 6px; font-size: 14px; font-weight: 500; }
#missing ul { margin: 0; padding: 0; list-style: none; }
#missing li + li { margin-top: 6px; }
#missing button, #way-out button, #write-it-in button, #ask-it button { max-width: 100%; min-height: 24px; padding: 3px 0; border: 0; border-radius: 0; background: transparent; color: #1d3c8f; font: inherit; text-align: left; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.write-it-in-item, .ask-it-item { display: inline-block; max-width: 100%; }
#missing button:focus-visible, #way-out button:focus-visible, #write-it-in button:focus-visible, #ask-it button:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 3px; }
.notepad { display: flex; flex-direction: column; }
.column-labels { order: -2; display: grid; grid-template-columns: 54% 46%; margin-bottom: 12px; color: var(--pencil); font-size: 14px; }
.column-labels label { font-weight: 600; }
.column-labels span { padding-left: 12px; }
.writing-area { display: grid; grid-template-columns: 54% 46%; grid-template-rows: minmax(0, 1fr); height: max(422px, calc(var(--rows, 0) * var(--row-height) + 26px)); }
.editor { position: relative; min-width: 0; min-height: 0; }
#deal, #line-ink, #reading-lines {
  font: 16px/var(--row-height) system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  tab-size: 4;
}
#deal {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 4px 6px 4px 0;
  border: 0;
  border-radius: 0;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: #1d3c8f;
  overflow: hidden auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#deal::selection { background: #1d3c8f26; }
#deal:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 4px; }
.ink-window { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#line-ink { padding: 4px 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#line-ink > div { min-height: var(--row-height); }
/* A wrapped line is tied together in the right margin, the way a pen brackets one entry
   that ran onto two rows. The mark sits in the padding both boxes keep, so wrapping is unchanged. */
#line-ink > .wrapped { position: relative; }
#line-ink > .wrapped::after {
  content: "";
  position: absolute;
  top: calc(var(--row-height) / 2 - 9px);
  bottom: calc(var(--row-height) / 2 - 9px);
  right: -5px;
  width: 4px;
  border: 1px solid var(--pencil);
  border-left: 0;
  border-radius: 0 5px 6px 0 / 0 7px 8px 0;
}
#line-ink [data-kind="note"] { color: var(--pencil); }
#line-suggestions {
  position: absolute;
  z-index: 3;
  left: 0;
  width: min(380px, 100%);
  max-height: 240px;
  overflow-y: auto;
  padding: 5px 3px 7px;
  border: 1px solid #5f636a48;
  border-bottom: 2px dotted #5f636a48;
  background: var(--paper);
  color: var(--pencil);
  font: 14px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
}
#line-suggestions[hidden] { display: none; }
#line-suggestions [role="option"] { min-height: 44px; padding: 10px 9px; cursor: pointer; }
.suggestion-word { color: #1d3c8f; }
#line-suggestions [aria-selected="true"], #line-suggestions [role="option"]:hover { background: #1d3c8f14; }
#line-suggestions [aria-selected="true"] .suggestion-word { text-decoration: underline; text-underline-offset: 3px; }
#nudge-buttons {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid #5f636a48;
  border-bottom-style: dotted;
  border-radius: 24px 22px 23px 21px;
  background: #fdfdfb;
}
#nudge-buttons[hidden] { display: none; }
#nudge-buttons button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #1d3c8f;
  border-radius: 50% 45% 48% 43%;
  background: #fdfdfb;
  color: #1d3c8f;
  font: 24px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}
#nudge-buttons button:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 2px; }
#readings { min-width: 0; max-height: 100%; overflow: hidden; border-left: 1px solid #5f636a1a; }
#reading-lines { padding: 4px 0 4px 12px; color: var(--pencil); }
#reading-lines > div { height: var(--row-height); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#reading-lines [data-kind="note"] { font-style: italic; }
.syntax-hint { margin: 14px 0 0; font-size: 13px; line-height: 1.7; color: var(--pencil); }
h2, h3 { margin: 0 0 12px; font-size: 16px; line-height: 20px; font-weight: 600; }
h2 span, h3 span { float: right; font-size: 13px; font-weight: 400; color: var(--pencil); }
#tally-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
#tally-title span { float: none; }
#tally-title > span { margin-left: auto; }
#tally-period { min-height: 24px; padding: 3px 0; border: 0; border-radius: 0; background: transparent; color: #1d3c8f; font: inherit; font-size: 13px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#tally-period:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 3px; }
#sale-title { margin-top: 28px; }
#refi { margin-top: 28px; }
.refi-timing { margin: -6px 0 6px; color: var(--pencil); font-size: 13px; }
.refi-summary dt small { display: block; margin-top: 3px; font-size: 12px; overflow-wrap: anywhere; }
#refi-cash-in { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
#refi-cash-in:empty { display: none; }
#refi [data-bad="true"], #refi-cash-in { color: #b22a22; }
.refi-year-note, .re-lease-note { display: block; color: var(--pencil); font-size: 11px; font-weight: 400; }
#targets, #taxes, #lender, #stress, #rules-of-thumb, #house-hack, #brrrr, #partners { margin-top: 28px; }
#pro-forma { margin-top: 28px; }
#pro-forma[hidden], #pro-forma [hidden] { display: none; }
#negotiate { margin-top: 28px; }
#offer-rows dt { color: inherit; }
#offer-rows [data-offer="walk-away"] { text-decoration: underline; text-underline-offset: 5px; }
#house-hack[hidden], #house-hack [hidden], #lender[hidden], #stress[hidden], #rules-of-thumb[hidden], #rules-of-thumb [hidden], #brrrr[hidden], #taxes[hidden], [data-tax-sale][hidden] { display: none; }
#stress { min-width: 0; }
#stress table { table-layout: fixed; font-size: 13px; }
#stress th, #stress td { padding: 10px 5px; white-space: normal; overflow-wrap: anywhere; }
#stress tr > :first-child { width: 31%; padding-left: 0; }
#stress tr > :last-child { width: 16%; padding-right: 0; }
#stress tbody th { font-size: 13px; }
#stress td { font-variant-numeric: tabular-nums; overflow-wrap: normal; white-space: nowrap; }
/* A house hack's monthly cost needs more room than DSCR; the row labels give a little. */
#stress.is-house-hack table:first-of-type tr > :first-child { width: 25%; }
#stress.is-house-hack table:first-of-type tr > :last-child { width: 25%; }
#stress-break-even.bad-news, #stress-arm.bad-news, #stress-cash-back.bad-news { color: #b22a22; }
#stress-hold { margin-top: 24px; }
#stress-hold[hidden] { display: none; }
#stress-hold caption { padding-bottom: 12px; }
#stress-hold tr > :first-child { width: 44%; }
#stress-hold tr > :nth-child(2) { width: 32%; }
#stress-hold tr > :last-child { width: 24%; }
/* Ahead of renting needs room for dollar losses instead of a short IRR. */
#stress-hold:has([data-col="ahead"]) tr > :first-child { width: 36%; }
#stress-hold:has([data-col="ahead"]) tr > :last-child { width: 32%; }
#rules-of-thumb dt small { display: block; margin-top: 3px; font-size: 12px; }
#rules-of-thumb .rule-note { grid-column: 1 / -1; max-width: none; margin-top: -8px; color: var(--pencil); font-size: 13px; line-height: 1.6; text-align: left; }
#brrrr .total dt small { color: var(--pencil); font-weight: 400; }
#house-hack dd small, #lender dd small { display: block; margin-top: 3px; color: var(--pencil); font-size: 12px; }
#lender [data-bad="true"] { color: #b22a22; }
.lender-comparison { margin: 4px 0 0; color: var(--pencil); font-size: 13px; text-align: right; }
#taxes-title small { display: block; margin-top: 4px; color: var(--pencil); font-size: 13px; font-weight: 400; }
#split-rule, #split-missing, #tax-assumptions, #hold-refi-note, .section-note { margin: 10px 0 0; color: var(--pencil); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#flip:not([hidden]) + #rental-tally:not([hidden]) { margin-top: 28px; }
.flip-rule dd small { display: block; margin-top: 4px; font-size: 12px; }
.flip-rule[data-bad="true"] dt, .flip-rule[data-bad="true"] dd { color: #b22a22; }
.flip-note { margin: 8px 0 0; color: var(--pencil); font-size: 13px; line-height: 1.6; }
#target-rows .target-row { border-top: 1px solid #1d3c8f38; }
.target-row dt { overflow-wrap: anywhere; }
.target-row dd { min-width: 0; }
.target-row [hidden] { display: none; }
.target-row dd small { display: block; margin-top: 4px; font-size: 12px; }
.target-row.bad-news dd { color: #b22a22; }
.target-row p { grid-column: 1 / -1; margin: 0; color: var(--pencil); font-size: 13px; }
.target-rent [data-col] { color: #1d3c8f; }
.target-rent [data-bad="true"] { color: #b22a22; }
.tally-group-heading { margin: 20px 0 4px; color: var(--pencil); font-size: 13px; }
dl { margin: 0; }
dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding: 8px 0; font-size: 15px; line-height: 1.4; }
dt { color: var(--pencil); }
dd { margin: 0; text-align: right; font-size: 17px; overflow-wrap: anywhere; max-width: 180px; }
[data-income-breakdown][hidden], [data-reimbursements-row][hidden], [data-free-rent-row][hidden], [data-in-place-row][hidden], [data-pro-forma-row][hidden] { display: none; }
.explain-row { position: relative; }
[data-explain] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* The label's native button also covers its number, without moving the dd. */
[data-explain]::after { content: ""; position: absolute; inset: 0; }
.explain-row:hover [data-explain], [data-explain]:focus-visible {
  text-decoration: underline dotted;
  text-underline-offset: 4px;
}
[data-explain]:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 4px; }
.explanation {
  position: relative;
  grid-column: 1 / -1;
  min-width: 0;
  max-width: none;
  margin: -4px 0 2px 10px;
  padding-left: 10px;
  border-left: 1px solid #5f636a60;
  color: var(--pencil);
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.65;
  text-align: left;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.explanation[hidden] { display: none; }
.total .explanation { color: var(--pencil); font-size: 13px; font-weight: 400; }
.subtraction dt { padding-left: 10px; }
[data-exit-lease-up][hidden] { display: none; }
#lease-up-tenants { display: block; margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; }
.subtotal { border-top: 1px solid #1d3c8f38; }
.total { border-bottom: 4px double #1d3c8f; margin-bottom: 5px; }
.total dt, .total dd { color: #1d3c8f; font-weight: 650; }
.total dd { font-size: 21px; }
.rate { margin-bottom: 14px; }
.debt small { display: block; font-size: 12px; margin-top: 3px; }
.debt small span { white-space: nowrap; }
.cash-in { margin-top: 15px; }
.cash-in dt span span { font-size: 13px; }
abbr { text-decoration: none; }
dd.bad-news, .total dd.bad-news, td.bad-news, #house-hack .bad-news { color: #b22a22; }
.lease-row[hidden], [data-unit-row][hidden], [data-sf-row][hidden], #rent-roll[hidden] { display: none; }
#comps { min-width: 0; margin-top: 32px; }
#comps[hidden] { display: none; }
#comps table { table-layout: fixed; }
#comps [data-col="name"] { width: 30%; white-space: normal; overflow-wrap: anywhere; }
#comps tbody th { color: #1d3c8f; }
#comps th, #comps td { padding: 10px 6px; }
#comps tr > :first-child { padding-left: 0; }
#comps tr > :last-child { padding-right: 0; }
#comps dl { max-width: 560px; margin-top: 14px; }
#comps dd small { display: block; margin-top: 3px; color: var(--pencil); font-size: 12px; }
#comp-summary { margin: 12px 0 0; color: var(--pencil); font-size: 14px; line-height: 1.6; }
#rent-roll { margin-top: 32px; table-layout: fixed; }
#rent-roll th, #rent-roll td { padding: 10px 8px; }
#rent-roll [data-col="tenant"] { width: 22%; text-align: left; white-space: normal; overflow-wrap: anywhere; padding-left: 0; }
#rent-roll tbody th { color: #1d3c8f; }
#rent-roll [data-col="sf"], #rent-roll [data-col="share"], #rent-roll [data-col="rate"] { width: 10%; }
#rent-roll [data-col="annual-rent"] { width: 14%; }
#rent-roll [data-col="type"] { width: 13%; white-space: normal; }
#rent-roll [data-col="bumps"] { width: 11%; }
#rent-roll [data-col="expires"] { width: 10%; padding-right: 0; }
@media (min-width: 1001px) {
  #rent-roll [data-col="vs-market"] { width: 10%; white-space: normal; }
  #rent-roll.has-market [data-col="tenant"] { width: 20%; }
  #rent-roll.has-market [data-col="sf"], #rent-roll.has-market [data-col="share"], #rent-roll.has-market [data-col="rate"] { width: 9%; }
  #rent-roll.has-market [data-col="type"] { width: 10%; }
  #rent-roll.has-market [data-col="bumps"] { width: 9%; }
}
.projection { margin-top: 32px; min-width: 0; }
.hold-charts { display: flex; gap: 36px; margin-bottom: 24px; }
.hold-charts[hidden] { display: none; }
.ink-chart { flex: 1; min-width: 0; margin: 0; }
.ink-chart[hidden] { display: none; }
#expiry-ladder { flex: none; margin-top: 24px; }
.ink-chart figcaption { font-size: 16px; font-weight: 600; }
.ink-chart figcaption span { display: block; margin-top: 5px; color: var(--pencil); font-size: 13px; font-weight: 400; }
.ink-chart svg { display: block; width: 100%; height: auto; max-height: 260px; margin-top: 8px; overflow: visible; }
.ink-chart text { fill: currentColor; font: 14px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ink-chart .chart-label { fill: var(--pencil); font-size: 13px; }
.hold-charts .chart-loss { color: #b22a22; }
.hold-charts text.chart-loss, .hold-charts .chart-loss text { text-decoration: underline wavy; text-underline-offset: 3px; }
.year-table-scroll { max-width: 100%; overflow-x: auto; }
.year-table-scroll:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 4px; }
.loan-schedule { min-width: 0; margin-top: 28px; }
.loan-schedule summary { cursor: pointer; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.loan-schedule summary:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 4px; }
.loan-schedule .year-table-scroll { margin-top: 12px; }
/* Five money columns must fit the narrow results column without hiding the balance. */
.loan-schedule th, .loan-schedule td { padding: 8px 0 8px 10px; font-size: 14px; }
.loan-schedule th:first-child, .loan-schedule td:first-child { padding-left: 0; }
/* Narrower boxes drop the Payment column (the summary names the yearly payment). */
@media (max-width: 1000px) {
  .loan-schedule th, .loan-schedule td { padding-left: 8px; font-size: 13px; }
  .loan-schedule [data-col="payment"] { display: none; }
}
.loan-schedule caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
#partner-years { margin-top: 24px; }
#partner-years tbody th { white-space: normal; }
caption { padding-bottom: 16px; text-align: left; font-size: 16px; font-weight: 600; }
caption span { display: block; margin-top: 5px; color: var(--pencil); font-size: 13px; font-weight: 400; }
[data-explain="year-assumptions"] { position: relative; margin: 6px 0 0 8px; color: var(--pencil); font-size: 13px; text-decoration: underline dotted; text-underline-offset: 4px; }
#explanation-year-assumptions { margin: 12px 0 0; }
th, td { padding: 10px 14px; text-align: right; white-space: nowrap; border-bottom: 1px solid #5f636a38; }
th { color: var(--pencil); font-weight: 400; }
thead th { font-weight: 600; }
tr > :first-child { padding-left: 0; text-align: left; }
tr > :last-child { padding-right: 0; }
#sensitivity { margin-top: 32px; table-layout: fixed; }
#sensitivity[hidden] { display: none; }
#sensitivity th, #sensitivity td { padding: 10px 4px; text-align: center; }
#sensitivity tr > :first-child { padding-left: 0; }
#sensitivity thead tr:first-child > :first-child { width: 28%; text-align: left; }
#sensitivity tbody th { text-align: left; }
#sensitivity thead tr:first-child th { border-bottom: 0; padding-bottom: 0; }
#sensitivity .short-price { display: none; }
#sensitivity .axis-change { display: block; margin-top: 3px; font-size: 0.8em; font-weight: 400; }
#sensitivity td > span { display: inline-block; padding: 5px 7px; }
#sensitivity [data-today="true"] > span { outline: 2px solid #1d3c8f; border-radius: 50% 45% 48% 43%; }
#sensitivity [data-bad="true"] { color: #b22a22; }
[data-bad="true"], #sensitivity [data-bad="true"] > span {
  text-decoration: underline wavy #b22a22;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
footer { margin-top: 38px; color: var(--pencil); font-size: 12px; line-height: 1.6; }
.footer-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; }
.share-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#copy-link, #copy-view-link, #keep-copy, #print, #download-csv, #save-picture, #backup, .restore-backup, #comparison #download-comparison, #portfolio #download-portfolio, #portfolio #save-portfolio-picture {
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1d3c8f;
  font: inherit;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#copy-link:focus-visible, #copy-view-link:focus-visible, #keep-copy:focus-visible, #print:focus-visible, #download-csv:focus-visible, #save-picture:focus-visible, #backup:focus-visible, .restore-backup:focus-within, #deal-link:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 4px; }
#comparison #download-comparison { margin-bottom: 8px; color: #1d3c8f; font-size: 13px; }
#portfolio #download-portfolio, #portfolio #save-portfolio-picture { margin-top: 8px; font-size: 13px; }
.restore-backup { position: relative; }
#restore { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; }
#copy-status { margin: 6px 0 0; }
#copy-status:empty { margin: 0; }
#link-fallback { margin-top: 10px; }
#deal-link { display: block; width: 100%; margin-top: 4px; padding: 6px; border: 1px solid var(--pencil); background: var(--paper); color: #1d3c8f; font: inherit; }

/* Long tenant lines get more writing room without changing the shared row height. */
@media (min-width: 1001px) {
  .workspace.has-leases { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); gap: 24px; }
  .has-leases .column-labels, .has-leases .writing-area { grid-template-columns: 65% 35%; }
}

/* The partner table sits in the narrow results column at every width; keep its money on one line. */
#partner-years th, #partner-years td { padding-left: 6px; padding-right: 6px; font-size: 13px; }
#partner-years.has-check th, #partner-years.has-check td { padding-left: 3px; padding-right: 3px; }
@media (max-width: 1000px) {
  #partner-years th, #partner-years td { padding-left: 3px; padding-right: 3px; }
  /* With a "You" column, the deal's own total (already in the hold table) steps aside. */
  #partner-years.has-check [data-col="deal"] { display: none; }
}

#partner-years tr > :first-child { padding-left: 0; }
#partner-years tr > :last-child { padding-right: 0; }

@media (max-width: 1000px) and (min-width: 701px) {
  body { padding: 30px 20px; }
  .napkin { padding: 38px 30px 26px; }
  .workspace { gap: 26px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .column-labels, .writing-area { grid-template-columns: 60% 40%; }
  dl > div { gap: 8px; font-size: 14px; }
  #rent-roll [data-col="share"], #rent-roll [data-col="type"], #rent-roll [data-col="vs-market"] { display: none; }
  #rent-roll [data-col="tenant"] { width: 27%; }
  #rent-roll [data-col="sf"], #rent-roll [data-col="rate"], #rent-roll [data-col="bumps"], #rent-roll [data-col="expires"] { width: 14%; }
  #rent-roll [data-col="annual-rent"] { width: 17%; }
}
@media (max-width: 700px) {
  /* A phone's first screen is the deal: the examples and the paste box wait after the results, one tap away. */
  #starter-home { order: 1; }
  #jump-examples { display: inline-flex; }
  .saved-deals { margin-bottom: 12px; }
  :root { --row-height: 56px; }
  body { padding: 14px 10px 22px; }
  .napkin { padding: 30px 22px 24px; transform: none; }
  .napkin::before { inset: 6px; border-width: 5px; }
  header { margin-bottom: 28px; }
  h1 { font-size: 40px; }
  header p { font-size: 14px; }
  .workspace { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .column-labels, .writing-area { grid-template-columns: minmax(0, 1fr); }
  /* Keep the list's accessible name while dropping the separate column. */
  #readings-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .writing-area { position: relative; height: max(404px, calc(var(--rows, 0) * var(--row-height) + 26px)); }
  #deal { padding-top: 0; }
  #line-ink { padding-top: 0; }
  /* The native caret and ink share the tall line box; pencil sits below it.
     Only the textarea receives pointer events, including over the readings. */
  #readings { position: absolute; inset: 0; border: 0; pointer-events: none; }
  #reading-lines { padding: 38px 6px 0 0; font-size: 13px; line-height: 18px; }
  #reading-lines > div { overflow: visible; text-overflow: clip; }
  .syntax-hint { font-size: 12px; }
  dl > div { font-size: 14px; gap: 10px; }
  dd { max-width: 155px; }
  .comparison-scroll { overflow: visible; }
  #comparison table { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  #comparison thead, #comparison tbody, #comparison tr { display: contents; }
  #comparison tr > :first-child { display: none; }
  #comparison th, #comparison td { grid-column: 1; grid-row: var(--compare-order); min-width: 0; padding: 10px 0; }
  #comparison thead th:not(:first-child) { min-width: 0; max-width: none; text-align: left; }
  #comparison thead th:nth-child(n+3) { margin-top: 22px; }
  #comparison button { max-width: 100%; text-align: left; }
  #comparison td { display: flex; justify-content: space-between; gap: 16px; white-space: normal; overflow-wrap: anywhere; }
  #comparison td::before { content: attr(data-compare-label); color: var(--pencil); text-align: left; }
  .hold-charts { flex-direction: column; gap: 22px; }
  table { font-size: 13px; }
  th, td { padding: 10px 5px; }
  /* Make room for the capex column on phones only when it is shown. */
  #projection.has-capex [data-col="debt-service"] { display: none; }
  #rent-roll [data-col="share"], #rent-roll [data-col="rate"], #rent-roll [data-col="type"], #rent-roll [data-col="bumps"], #rent-roll [data-col="vs-market"] { display: none; }
  #rent-roll th, #rent-roll td { padding: 10px 4px; }
  #rent-roll thead th { white-space: normal; }
  #rent-roll [data-col="tenant"] { width: 34%; padding-left: 0; }
  #rent-roll [data-col="sf"] { width: 20%; }
  #rent-roll [data-col="annual-rent"] { width: 27%; }
  #rent-roll [data-col="expires"] { width: 19%; padding-right: 0; }
  #comps [data-col="price-unit"] { display: none; }
  #comps [data-col="name"] { width: 26%; }
  #comps [data-col="price"] { width: 31%; }
  #comps [data-col="cap"] { width: 21%; }
  #comps [data-col="price-sf"] { width: 22%; padding-right: 0; }
  #comps th, #comps td { padding: 10px 3px; }
  #comps thead th { white-space: normal; }
  #sensitivity { font-size: 11px; }
  #sensitivity th, #sensitivity td { padding: 8px 1px; }
  #sensitivity thead tr:first-child > :first-child { width: 25%; }
  #sensitivity .full-price { display: none; }
  #sensitivity .short-price { display: inline; }
  #sensitivity .price-change { display: block; font-size: 10px; }
  #sensitivity td > span { padding: 5px 1px; }
  footer { margin-top: 28px; }
  /* A fingertip needs about 44 px. Text links keep their look; only their tap area grows. */
  .saved-deals button, .listing-tools button, #missing button, #way-out button, #write-it-in button, #ask-it button, #tally-period,
  #comparison button, #portfolio button, #history-list [data-restore], #undo-delete,
  .share-tools > button, .share-tools > .restore-backup {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .saved-deals { row-gap: 0; }
  .share-tools { row-gap: 0; }
  .starters button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; vertical-align: baseline; }
  #draft label { min-height: 44px; }
  /* Each tally row's label button covers its row; make the row a full tap target. */
  dl > div { padding: 10px 0; }
  [data-explain="year-assumptions"] { padding: 15px 0; margin: -9px 0 -15px 8px; }
  #sensitivity { font-size: 12px; }
  #sensitivity .price-change { font-size: 12px; }
  /* Small print stays at least 12px on a phone. */
  small { font-size: max(12px, 0.83em); }
}
/* The smallest phones: a little less napkin margin, and year-table headings may wrap,
   so the cash flow column stays on screen. */
@media (max-width: 360px) {
  .napkin { padding: 26px 14px 20px; }
  .napkin::before { inset: 4px; border-width: 4px; }
  .year-table-scroll thead th { white-space: normal; }
  .year-table-scroll th, .year-table-scroll td { padding-left: 3px; padding-right: 3px; font-size: 12px; }
  #partner-years th, #partner-years td { padding-left: 2px; padding-right: 2px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  #deal { color: CanvasText; caret-color: CanvasText; }
  .ink-window { display: none; }
  #line-suggestions { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .suggestion-word { color: LinkText; }
  #line-suggestions [aria-selected="true"] { outline: 1px solid Highlight; outline-offset: -2px; }
  #nudge-buttons { background: Canvas; border-color: CanvasText; }
  #nudge-buttons button { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  #nudge-buttons button:focus-visible { outline-color: Highlight; }
}

/* A pencil rule and three pens, on the same napkin as the deal. */
/* While open it stays on screen, even for a number at the top of a long deal: a strip of the same napkin. */
#ruler { position: sticky; bottom: 0; z-index: 3; margin-top: 12px; padding: 8px 0 4px; min-width: 0; background: #fdfdfb; border-top: 1px dotted var(--pencil); }
#ruler[hidden] { display: none; }
#ruler-label { display: block; margin-bottom: 4px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--pencil); }
/* A pencil notch where the number stood when you arrived. */
#ruler-start { position: absolute; top: 16px; width: 1px; height: 18px; margin-left: -0.5px; background: var(--pencil); pointer-events: none; }
.ruler-line { position: relative; margin: 0 8px; }
#ruler-range {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; height: 44px; margin: 0;
  background: transparent; color: #1d3c8f; cursor: ew-resize;
}
#ruler-range::-webkit-slider-runnable-track { height: 1px; background: var(--pencil); }
#ruler-range::-moz-range-track { height: 1px; background: var(--pencil); }
#ruler-range::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 5px; height: 21px;
  margin-top: -10px; border: 1px solid #1d3c8f; border-radius: 0; background: #1d3c8f;
}
#ruler-range::-moz-range-thumb {
  width: 4px; height: 20px; border: 1px solid #1d3c8f; border-radius: 0; background: #1d3c8f;
}
#ruler-band { position: absolute; top: 26px; left: 0; right: 0; display: flex; height: 4px; pointer-events: none; }
#ruler-band span { background: #1d3c8f; }
#ruler-band [data-verdict="thin"] { background: #5f636a; }
#ruler-band [data-verdict="no"] { background: #b22a22; }
.ruler-line::before {
  content: ''; position: absolute; top: 19px; left: 25%; width: 50%; height: 6px;
  border-left: 1px solid var(--pencil); border-right: 1px solid var(--pencil); pointer-events: none;
}
.ruler-line::after {
  content: ''; position: absolute; top: 18px; left: 0; right: 0; height: 8px;
  border-left: 1px solid var(--pencil); border-right: 1px solid var(--pencil);
  pointer-events: none;
}
#ruler-says { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--pencil); }
#ruler-back { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--pencil); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
#ruler-range:focus-visible, #ruler-back:focus-visible { outline: 2px solid #1d3c8f; outline-offset: 3px; }
@media (forced-colors: active) {
  #ruler-range { forced-color-adjust: auto; }
  #ruler-range::-webkit-slider-thumb { background: ButtonText; border-color: ButtonText; }
  #ruler-range::-moz-range-thumb { background: ButtonText; border-color: ButtonText; }
  #ruler-range::-webkit-slider-runnable-track { background: CanvasText; }
  #ruler-range::-moz-range-track { background: CanvasText; }
  #ruler-band span { background: Highlight; }
  #ruler-band [data-verdict="thin"] { background: GrayText; }
  #ruler-band [data-verdict="no"] { background: CanvasText; }
  #ruler-range:focus-visible, #ruler-back:focus-visible { outline-color: Highlight; }
}