/* ═══════════════════════════════════════════════════════
   Presentation CMA — map, photos & graphs
   Niko Hansen · Associate Broker · eXp Realty, LLC

   Loaded after cma-style.css and inherits its variables and
   its .agent-card / .report-disclaimer blocks. Everything
   here is namespaced .p- so the two report formats can never
   collide.
   ═══════════════════════════════════════════════════════ */

:root {
  /* Status hues — locked to the pin colours of the FlexMLS map bitmap.
     Validated as a categorical set; see the note in cma-presentation.js
     before changing any of them. */
  --p-closed:     #2a78d6;
  --p-pending:    #eda100;
  --p-active:     #008300;
  --p-subject:    #e34948;
  --p-closed-bg:  #eaf2fd;
  --p-pending-bg: #fdf3dc;
  --p-active-bg:  #e6f3e6;
  /* Secondary ink on the presentation pages. Moss grey rather than the old
     warm grey — this is type, not a status hue, so it follows the brand. */
  --p-ink-3:      var(--exp-moss-grey);
}

/* ── Upload mode picker ─────────────────────────────────── */
.mode-picker-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  margin-bottom: 9px;
}

.mode-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
  align-items: stretch;
}

.mode-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font-family: var(--font-body);
  background: var(--white);
  /* A 2px transparent border keeps the box the same size in both states, so
     selecting one does not nudge the pair out of alignment. */
  border: 2px solid var(--border);
  border-radius: 2px;
  padding: 13px 15px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.mode-option:hover { border-color: var(--gold); background: var(--cream); }

.mode-option.active {
  border-color: var(--dark);
  background: var(--cream);
}

.mode-option-name {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--dark);
  white-space: nowrap;
}

.mode-option-desc {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 520px) {
  .mode-picker { grid-template-columns: 1fr; }
}

/* ── Page scaffold ──────────────────────────────────────── */
.p-report {
  font-family: var(--font-body);
  color: var(--dark);
}

.p-page {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 44px 48px;
  margin-bottom: 28px;
}

.p-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 10px;
}

.p-h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.2;
  color: var(--dark);
  margin-bottom: 26px;
}

.p-h3 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mid);
  margin: 30px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-lede {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: -14px 0 22px;
  max-width: 62ch;
}

.p-dot { color: var(--border); margin: 0 6px; }

.p-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--p-ink-3);
  font-size: 11px;
  letter-spacing: 0.4px;
}

/* ── Cover ──────────────────────────────────────────────── */
.p-page-cover { padding: 44px 48px 36px; }

/* The shared agent card, re-seated at the top of the cover. It closes the
   report as a footer there, so the rule and padding it carries for that
   position get reversed here — everything else about the component, including
   the NMAC brokerage disclosure, is untouched. */
.p-cover-card { margin-bottom: 26px; }

.p-cover-card .agent-card {
  border-top: none;
  border-bottom: 1px solid var(--border-light);
  padding-top: 0;
  padding-bottom: 22px;
}

.p-cover-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 2px;
  background: var(--cream);
}

.p-cover-body {
  padding: 30px 0 26px;
  border-bottom: 1px solid var(--border-light);
}

.p-cover-address {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.2px;
  margin-bottom: 14px;
}

.p-cover-city {
  display: block;
  font-size: 20px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.3px;
  margin-top: 4px;
}

.p-cover-prepared { font-size: 14px; color: var(--mid); }
.p-cover-prepared strong { font-weight: 600; color: var(--dark); }
.p-cover-date { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.p-cover-foot { padding-top: 20px; }

.p-cover-note {
  font-size: 9.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 70ch;
}

/* ── Subject ────────────────────────────────────────────── */
.p-subject-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 26px;
  align-items: start;
}

.p-subject-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 2px;
  background: var(--cream);
}

.p-subject-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
}

/* The lede on the "what this covers" page is part of the document, not a
   screen-only hint like the one over the comparable cards. */
.p-lede-keep { margin: 0 0 20px; }

.p-spec { background: var(--white); padding: 14px 16px; }

.p-spec-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

.p-spec-value {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  color: var(--dark);
  line-height: 1.1;
}

/* Hero figure — the one number the seller came for. */
.p-hero {
  margin-top: 26px;
  padding: 26px 30px;
  background: var(--cream);
  border: 1px solid var(--border);
  text-align: center;
}

.p-hero-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.p-hero-value {
  font-family: var(--font-body);
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -1.4px;
  line-height: 1;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}

.p-hero-range { font-size: 12.5px; color: var(--mid); margin-top: 10px; }

.p-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  margin-top: 22px;
}

.p-tile { background: var(--white); padding: 16px 18px; }

.p-tile-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.p-tile-value {
  font-size: 19px;
  font-weight: 600;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}

/* ── Map ────────────────────────────────────────────────── */
.p-map-wrap {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 26px;
  align-items: start;
  margin-bottom: 8px;
}

.p-map {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 2px;
  display: block;
}

.p-map-note {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mid);
  margin: 14px 0 16px;
}

.p-subject-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 10px 12px;
}

.p-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Legend ─────────────────────────────────────────────── */
.p-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11.5px;
  color: var(--mid);
  margin-bottom: 14px;
}

.p-legend-item { display: inline-flex; align-items: center; gap: 6px; }

.p-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.p-legend-band {
  width: 16px;
  height: 11px;
  display: inline-block;
  background: rgba(227, 73, 72, 0.12);
  border-left: 1.5px solid var(--p-subject);
  border-right: 1.5px solid var(--p-subject);
}

/* ── Badges ─────────────────────────────────────────────── */
.p-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}

.p-badge-closed  { background: var(--p-closed-bg);  color: #14508f; }
.p-badge-pending { background: var(--p-pending-bg); color: #7a5300; }
.p-badge-active  { background: var(--p-active-bg);  color: #005700; }
.p-badge-other   { background: var(--cream);        color: var(--mid); }

/* ── Tables ─────────────────────────────────────────────── */
.p-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 4px;
}

.p-table th {
  text-align: left;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 10px;
  border-bottom: 1px solid var(--dark);
  white-space: nowrap;
}

.p-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.p-table tbody tr:last-child td { border-bottom: none; }

.p-table .p-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-table .p-strong, .p-table tr.p-strong td { font-weight: 600; }
.p-table-tight { font-size: 11px; }
.p-table-tight th, .p-table-tight td { padding: 7px 7px; }

.p-mono { font-variant-numeric: tabular-nums; color: var(--mid); white-space: nowrap; }
.p-pin-cell { width: 34px; }
.p-addr-cell { line-height: 1.35; }

.p-addr-sub {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
}

.p-roster tbody tr:nth-child(even) { background: #fcfbf9; }

/* ── Comparable cards ───────────────────────────────────────
   The photograph is a thumbnail beside the detail, not a band across the top
   of the card. FlexMLS only embeds these at 300px wide, which reads soft much
   past 1.5in on paper; at thumbnail size it is sharp, the card is half the
   height, and a twelve-comparable report costs a fraction of the ink. */
.p-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 12px;
}

.p-card {
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  background: var(--white);
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: stretch;
}

.p-card-on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }

.p-card-media { position: relative; }

.p-card-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 92px;
  object-fit: cover;
  background: var(--cream);
}

.p-card-pin {
  position: absolute;
  top: 7px;
  left: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 0 0 2px #fff;
}

.p-card-body { padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 6px; }

.p-card-addr {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dark);
}

.p-card-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* Specs as one line of text rather than a grid of bordered cells. */
.p-specline {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--mid);
}

/* The markup puts real spaces either side of this, which is what lets a long
   spec or meta line break between items instead of measuring as one
   unbreakable word — so the margin here is only the extra optical gap. */
.p-sep { color: var(--border); margin: 0 1px; }

.p-discuss {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--mid);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 5px 9px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.p-discuss:hover { border-color: var(--gold); color: var(--dark); }

.p-discuss-on {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.p-card-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.p-card-price .p-badge { align-self: center; }

.p-card-price-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.p-card-psf { font-size: 11px; color: var(--muted); }
.p-card-adj { font-size: 10.5px; color: var(--muted); }

.p-delta { font-size: 10px; color: var(--p-ink-3); }

/* Wraps rather than clips: the Discuss button drops to its own line before it
   can be cut off by the card's overflow, however long the meta line runs. */
.p-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: auto;
  padding-top: 3px;
}

.p-card-meta {
  font-size: 10.5px;
  color: var(--muted);
  flex: 1 1 auto;
  min-width: 0;
}

.p-notes { display: grid; gap: 9px; padding-top: 4px; }
.p-notes label { display: block; }

.p-notes span {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.p-notes textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--dark);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 7px 9px;
  resize: vertical;
}

.p-notes textarea:focus { outline: none; border-color: var(--gold); background: var(--white); }

/* ── Key comps ──────────────────────────────────────────── */
.p-keys { display: grid; gap: 14px; }

.p-key {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  padding: 16px;
  align-items: start;
}

.p-key-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 2px;
  background: var(--cream);
}

.p-key-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }

.p-key-addr {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--dark);
}

.p-key-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--mid);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.p-key-stats strong { font-size: 14px; color: var(--dark); font-variant-numeric: tabular-nums; }

.p-key-vs { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

.p-key-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.p-key-note-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 4px;
}

.p-key-note-diff .p-key-note-label { color: var(--muted); }

.p-key-note-text { font-size: 12.5px; line-height: 1.55; color: var(--dark); min-height: 18px; }

/* ── Charts ─────────────────────────────────────────────── */
.p-figure { margin: 0 0 30px; }

.p-figcap { display: block; margin-bottom: 10px; }

.p-figtitle {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--dark);
}

.p-figsub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.p-svg { width: 100%; height: auto; display: block; overflow: visible; }

.p-grid { stroke: var(--border-light); stroke-width: 1; }
.p-stem { stroke: var(--border-light); stroke-width: 1; }

.p-axis {
  font-family: var(--font-body);
  font-size: 10px;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}

.p-rowlabel { font-family: var(--font-body); font-size: 11.5px; fill: var(--dark); }
.p-rowsub   { font-family: var(--font-body); font-size: 10px;   fill: var(--muted); }

/* Chart labels carry no stroke halo. The recommendation rule is hidden behind
   the few labels it actually crosses by a white rect drawn under them in
   pKnockout() — a stroke wide enough to cover the rule closes the counters of
   small bold digits and the whole column prints as black slugs. */
.p-plainlabel { paint-order: normal; stroke: none; }

.p-vallabel {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  fill: var(--dark);
  font-variant-numeric: tabular-nums;
}

.p-medlabel {
  font-family: var(--font-body);
  font-size: 10px;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}

.p-reclabel {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  fill: var(--p-subject);
  font-variant-numeric: tabular-nums;
}

.p-pinchar { font-family: var(--font-body); font-size: 9px; font-weight: 700; fill: #fff; }

/* ── Recommendation ─────────────────────────────────────── */
.p-reco {
  border: 1px solid var(--border);
  margin-bottom: 10px;
}

.p-reco-main { background: var(--cream); padding: 30px 20px; text-align: center; }

.p-reco-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.p-reco-value {
  font-size: 44px;
  font-weight: 600;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1.2px;
  line-height: 1.05;
}

.p-reco-sub { font-size: 12px; color: var(--mid); margin-top: 10px; }

/* ── Range editor (screen only) ─────────────────────────── */
.p-reco-edit {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--off-white);
  margin-bottom: 20px;
}

.p-reco-edit-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
  margin-right: 2px;
}

.p-reco-edit label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}

.p-reco-edit input {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 6px 8px;
  width: 116px;
}

.p-reco-edit input:focus { outline: none; border-color: var(--gold); }

.p-reco-reset {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--mid);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 7px 10px;
  cursor: pointer;
}

.p-reco-reset:hover { border-color: var(--gold); color: var(--dark); }

/* ── Pricing strategy ───────────────────────────────────── */
.p-strategy { margin-bottom: 24px; }

.p-strategy-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 8px;
}

.p-strategy textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--dark);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 9px 11px;
  resize: vertical;
}

.p-strategy textarea:focus { outline: none; border-color: var(--gold); background: var(--white); }

.p-strategy-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--dark);
  white-space: pre-wrap;
}

/* On screen the typed text lives in the textarea; the rendered copy is for
   print only, so it does not read twice. */
.p-strategy-text { display: none; }
@media print { .p-strategy-text { display: block; } }

.p-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.p-chip {
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 8px 12px;
  background: var(--off-white);
}

.p-chip-label {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

.p-chip-value { font-size: 12px; font-weight: 500; color: var(--dark); }

.p-criteria {
  font-size: 10px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 14px;
}

/* The shared agent card / disclaimer sit inside the last page. */
.p-page .agent-card { margin-top: 32px; }

/* ── Narrow screens ─────────────────────────────────────────
   Scoped to `screen` on purpose. A letter page is ~816 CSS px wide, so an
   unscoped max-width:860px breakpoint fires during printing and collapses
   every grid below to one column — which is how the subject sheet, the map
   and the Low/Recommended/High band each ended up spilling onto a page of
   their own. Print gets its own layout in the block underneath. */
@media screen and (max-width: 860px) {
  .p-page { padding: 28px 22px; }
  .p-subject-grid, .p-map-wrap { grid-template-columns: 1fr; }
  .p-tiles { grid-template-columns: 1fr 1fr; }
  .p-key { grid-template-columns: 1fr; }
  .p-key-notes { grid-template-columns: 1fr; }
  .p-cover-address { font-size: 28px; }
  .p-hero-value { font-size: 40px; }
  .p-cards { grid-template-columns: 1fr; }
}

@media screen and (max-width: 520px) {
  .p-card { grid-template-columns: 104px 1fr; }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  /* @page size/margin comes from #printOrientationStyle; this format
     is laid out for portrait. */

  .p-report { font-size: 10pt; }

  .p-page {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    page-break-after: always;
    break-after: page;
  }

  .p-report > .p-page:last-child,
  .p-page:last-child { page-break-after: auto; break-after: auto; }

  .p-keycomps[style*="none"] { display: none !important; }

  /* Headings stay with what they introduce — otherwise a long section can
     leave "What the comparables say" alone at the foot of a sheet. */
  .p-h2 {
    font-size: 24px;
    margin-bottom: 18px;
    page-break-after: avoid;
    break-after: avoid;
  }
  .p-h3 { margin: 20px 0 9px; page-break-after: avoid; break-after: avoid; }
  .p-eyebrow { page-break-after: avoid; break-after: avoid; }

  /* Fill the sheet rather than floating in the top two thirds: the photo
     takes the extra height and the contact block sits on the bottom rule. */
  .p-page-cover {
    padding: 0;
    min-height: 9.4in;
    display: flex;
    flex-direction: column;
  }
  .p-cover-address { font-size: 31px; }
  .p-cover-city { font-size: 17px; }
  .p-cover-body { padding: 26px 0 20px; }
  .p-cover-photo { aspect-ratio: 4 / 3; }
  .p-cover-foot { margin-top: auto; }

  .p-cover-card { margin-bottom: 20px; }
  .p-cover-card .agent-card { padding-bottom: 16px; }

  /* Pinned rather than tracking the column, so the photo is a known 3.1in of
     ink instead of filling whatever width is going. */
  .p-subject-grid { grid-template-columns: 3.1in 1fr; gap: 22px; }
  .p-subject-photo { aspect-ratio: 3 / 2; }

  .p-hero { page-break-inside: avoid; break-inside: avoid; padding: 30px; }
  .p-hero-value { font-size: 44px; }

  /* The map and its roster belong on one sheet, and the roster is what grows:
     twelve comparables ran the section to 11.2in against a 10.1in page and
     pushed a single row overleaf. The map is pinned to 3.5in instead of
     tracking its column width, and each roster row is one line rather than
     two. That leaves headroom for roughly twenty comparables before the
     table has to break — and it breaks mid-table, never one orphaned row. */
  .p-map-wrap {
    page-break-inside: avoid;
    break-inside: avoid;
    grid-template-columns: 3.5in 1fr;
    gap: 20px;
    margin-bottom: 6px;
  }

  .p-map {
    border: 1px solid var(--border);
    width: 100%;
    max-height: 3.6in;
    object-fit: contain;
    object-position: left top;
  }

  .p-map-note { font-size: 11px; margin: 10px 0 12px; }

  .p-roster td { padding: 4px 7px; }
  .p-roster .p-addr-sub { display: inline; margin-left: 7px; }
  /* Zebra striping is screen affordance, not information — don't print it. */
  .p-roster tbody tr:nth-child(even) { background: none; }

  .p-table { font-size: 8.5pt; page-break-inside: auto; }
  .p-table th { font-size: 6.5pt; padding: 6px 7px; }
  .p-table td { padding: 5px 7px; }
  .p-table thead { display: table-header-group; }
  .p-table tr { page-break-inside: avoid; break-inside: avoid; }
  .p-table-tight { font-size: 7.5pt; }

  /* 1.15in of photo holds ~260dpi out of a 300px source, so the thumbnails
     print sharp instead of soft — and two columns of short cards put all
     twelve comparables on one sheet. */
  .p-cards { grid-template-columns: repeat(2, 1fr); gap: 9px; }

  .p-card {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid var(--border);
    grid-template-columns: 1.15in 1fr;
  }

  .p-card-photo { min-height: 0.78in; }
  .p-card-body { padding: 8px 10px 9px; gap: 4px; }
  .p-card-addr { font-size: 13px; }
  .p-card-sub { font-size: 9px; }
  .p-card-price-value { font-size: 16px; }
  .p-specline { font-size: 9.5px; }
  .p-card-meta { font-size: 9px; }

  .p-key { page-break-inside: avoid; break-inside: avoid; grid-template-columns: 1.5in 1fr; }

  .p-figure { page-break-inside: avoid; break-inside: avoid; margin-bottom: 22px; }

  .p-tiles { grid-template-columns: repeat(4, 1fr); }
  .p-tile-value { font-size: 16px; }

  .p-reco { page-break-inside: avoid; break-inside: avoid; }
  .p-strategy { page-break-inside: avoid; break-inside: avoid; }
  .p-reco-value { font-size: 38px; }


  .no-print { display: none !important; }

  /* Keep the fills that carry meaning — status colour, the pin letters that
     tie a card to the map, the two price panels. A CMA printed in grey bars
     is a CMA nobody reads. Decorative fills are switched off above instead. */
  .p-badge, .p-pin, .p-card-pin, .p-legend-dot, .p-hero, .p-reco-main,
  .p-spec, .p-tile {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}