/* ═══════════════════════════════════════════════════════
   Property Feature Sheet — Niko Hansen · eXp Realty, LLC

   Companion to the Open House Packet. Same type, same
   palette, same print discipline: one physical sheet, one
   idea, nothing on the page a buyer would not ask about.
   ═══════════════════════════════════════════════════════ */

/* ── eXp Realty 2026 brand palette ────────────────────────────────────────────
   The approved values, verbatim from the 2026 brand guide:

     PRIMARY    BLACK      #000000    DARK NAVY  #0C0F24
                LIGHT GREY #EEEEEE    WHITE      #FFFFFF
     SECONDARY  CHARCOAL BLUE #31303F   MOSS GREY     #686672
                SLATE BLUE    #506CAA   FROSTED BLUE  #91A3C9

   Three are deliberately unused here — DARK NAVY, SLATE BLUE and CHARCOAL
   BLUE. Niko's call, Sep 2026: the sheet runs black/white/light grey with
   moss grey and frosted blue. Do not reintroduce the blues without asking.

   FROSTED BLUE IS NOT A TEXT COLOUR. It measures 2.5:1 on white, which fails
   WCAG AA for any size — it is used for fills, rules and borders only, and
   carries BLACK text when it is a background (8.3:1). Moss grey on white is
   5.6:1 and does the small-label work the old gold accent used to do.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --exp-black:        #000000;
  --exp-white:        #FFFFFF;
  --exp-light-grey:   #EEEEEE;
  --exp-moss-grey:    #686672;
  --exp-frosted-blue: #91A3C9;

  --white:        var(--exp-white);
  --off-white:    var(--exp-light-grey);
  /* Tints and hairlines are opacities of an approved colour, not new inks. */
  --cream:        rgba(145, 163, 201, .16);   /* frosted blue wash */
  --accent:       var(--exp-frosted-blue);    /* fills, rules, active borders */
  --accent-ink:   var(--exp-moss-grey);       /* the labels that used to be gold */
  --border:       rgba(104, 102, 114, .26);
  --border-light: rgba(104, 102, 114, .14);
  --dark:         var(--exp-black);
  --mid:          var(--exp-moss-grey);
  /* Solid moss grey, NOT a lighter tint of it. The smallest type on the sheet
     — the 8.5px feature labels and the 8px stat keys — uses this, and moss at
     82% measures 3.8:1, which fails AA at that size. Full strength is 5.6:1.
     Hierarchy here comes from size, weight and letter-spacing, not a second,
     paler grey. */
  --muted:        var(--exp-moss-grey);

  /* Screen-only. A warning has to read as a warning, and the brand palette has
     no alert colour. This never reaches the printed sheet — see @media print. */
  --red:          #B3261E;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--off-white);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════
   SCREEN — Upload
   ═══════════════════════════════════════════════════════ */
.upload-screen {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh; padding: 48px 20px; gap: 32px;
}
.upload-header { text-align: center; }
.upload-logo { height: 52px; width: auto; object-fit: contain; margin-bottom: 12px; }
.upload-agent-name { font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: .4px; }
.upload-brokerage { font-size: 12px; color: var(--muted); letter-spacing: .8px; text-transform: uppercase; margin-top: 4px; }
.upload-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; padding: 32px; width: 100%; max-width: 580px;
}
.upload-zone {
  border: 2px dashed var(--border); border-radius: 8px;
  padding: 44px 24px; text-align: center; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: var(--cream); }
.upload-arrow { font-size: 30px; color: var(--accent-ink); line-height: 1; }
.upload-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-top: 10px; }
.upload-sub { font-size: 13px; color: var(--muted); margin-top: 5px; }
.upload-note {
  margin-top: 16px; padding: 11px 13px; background: var(--cream);
  border-radius: 6px; font-size: 12px; color: var(--mid); line-height: 1.55;
}
.upload-note strong { color: var(--dark); font-weight: 600; }
.upload-status { margin-top: 14px; font-size: 13px; text-align: center; color: var(--muted); }
.upload-status.error { color: var(--red); }
.upload-skip { margin-top: 18px; text-align: center; font-size: 13px; }
.upload-skip button {
  background: none; border: none; color: var(--accent-ink);
  font-family: var(--font-body); font-size: 13px;
  text-decoration: underline; cursor: pointer; padding: 0;
}
.upload-back { font-size: 13px; color: var(--muted); text-decoration: none; }
.upload-back:hover { color: var(--dark); }

/* ═══════════════════════════════════════════════════════
   SCREEN — Build panel
   ═══════════════════════════════════════════════════════ */
.build-screen { max-width: 1000px; margin: 0 auto; padding: 32px 20px 108px; }
.build-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 14px; padding-bottom: 18px; margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.build-title { font-family: var(--font-display); font-size: 30px; font-weight: 500; }
.build-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }

.block { margin-bottom: 30px; }
.block-title {
  font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600; margin-bottom: 4px;
}
.block-hint { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.field label {
  display: block; font-size: 11px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; font-family: var(--font-body);
  font-size: 14px; color: var(--dark); background: var(--white);
  border: 1px solid var(--border); border-radius: 6px;
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field-hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
/* Inline "undo" affordance inside a hint line. */
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--dark); text-decoration: underline;
}
.link-btn:hover { color: var(--accent-ink); }

/* ── Confidential notice ──────────────────────────────── */
.guard-note {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--cream); border: 1px solid var(--accent);
  border-radius: 8px; padding: 13px 15px; margin-bottom: 26px;
}
.guard-note-icon { color: var(--dark); font-size: 15px; line-height: 1.3; }
.guard-note-body { font-size: 12.5px; color: var(--dark); line-height: 1.55; }
.guard-note-body strong { font-weight: 600; }
.guard-list { color: var(--mid); font-size: 11.5px; margin-top: 3px; }

/* ── Feature picker ───────────────────────────────────── */
.pick-group { margin-bottom: 20px; }
.pick-group-head {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--mid); font-weight: 600; margin-bottom: 9px;
  padding-bottom: 5px; border-bottom: 1px solid var(--border-light);
}
.pick-group-head button {
  background: none; border: none; color: var(--accent-ink); cursor: pointer;
  font-family: var(--font-body); font-size: 10.5px; letter-spacing: .4px;
  text-transform: none; text-decoration: underline; padding: 0;
}
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 8px; }
.pick {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px; background: var(--white);
  border: 1px solid var(--border); border-radius: 7px;
}
.pick.on { border-color: var(--accent); background: var(--cream); }
.pick input[type=checkbox] { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--exp-black); flex-shrink: 0; cursor: pointer; }
.pick-body { flex: 1; min-width: 0; }
.pick-label {
  width: 100%; border: none; background: none; padding: 0;
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: .7px; text-transform: uppercase; color: var(--muted);
}
.pick-label:focus { outline: none; color: var(--dark); }
.pick-value {
  width: 100%; border: none; background: none; padding: 1px 0 0;
  font-family: var(--font-body); font-size: 13px; color: var(--dark); line-height: 1.4;
  resize: none; overflow: hidden;
}
.pick-value:focus { outline: none; }
.pick-src { font-size: 10px; color: var(--muted); margin-top: 3px; font-style: italic; }
.btn-add-row {
  margin-top: 10px; background: none; border: 1px dashed var(--border);
  border-radius: 6px; padding: 8px 14px; font-family: var(--font-body);
  font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.btn-add-row:hover { border-color: var(--accent); color: var(--dark); }

/* ── Recent brokers ───────────────────────────────────────
   The public report does not carry the listing office, so the
   broker gets typed once and remembered. Next open house for
   the same agent is one click. */
.lb-recent { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.lb-chip {
  background: var(--white); border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 13px; font-family: var(--font-body); font-size: 12.5px;
  color: var(--mid); cursor: pointer;
}
.lb-chip:hover { border-color: var(--accent); color: var(--dark); }
.lb-chip b { font-weight: 600; color: var(--dark); }
.lb-chip:hover b { color: var(--dark); }

/* ── Main photo panel ─────────────────────────────────────
   Its own decision: keep the report's frame, or drop in the
   full-size original. Anything else on the sheet is small
   enough that 300px is fine. */
.hero-panel {
  display: flex; gap: 17px; align-items: stretch;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 9px; padding: 15px;
}
.hero-shot {
  width: 232px; flex-shrink: 0; aspect-ratio: 3 / 2;
  border-radius: 5px; overflow: hidden; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-shot-empty { font-size: 11.5px; color: var(--muted); letter-spacing: .6px; }
.hero-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.hero-verdict { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.hero-verdict.good { color: var(--dark); }
.hero-verdict.soft { color: var(--red); }
.hero-why { font-size: 12px; color: var(--muted); line-height: 1.55; }
.hero-why strong { color: var(--mid); font-weight: 600; }
.hero-acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: auto; }
.hero-acts button {
  border-radius: 6px; padding: 9px 15px; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500; border: 1px solid;
}
.hero-keep { background: var(--white); color: var(--mid); border-color: var(--border); }
.hero-keep:hover { border-color: var(--accent); color: var(--dark); }
.hero-keep.chosen { background: var(--cream); border-color: var(--accent); color: var(--dark); }
.hero-up { background: var(--exp-black); color: var(--white); border-color: var(--exp-black); }
.hero-up:hover { background: var(--exp-moss-grey); border-color: var(--exp-moss-grey); }

@media screen and (max-width: 680px) {
  .hero-panel { flex-direction: column; }
  .hero-shot { width: 100%; }
}

/* ── Photo picker ─────────────────────────────────────────
   A 50-photo report needs a contact sheet, not a strip: click
   a frame to put it on the page, star it to make it the big
   one. The count of chosen frames drives the fit meter. */
.photo-tools {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-bottom: 11px; font-size: 12px; color: var(--muted);
}
.photo-tools button {
  background: none; border: 1px solid var(--border); border-radius: 5px;
  padding: 5px 11px; font-family: var(--font-body); font-size: 12px;
  color: var(--mid); cursor: pointer;
}
.photo-tools button:hover { border-color: var(--accent); color: var(--dark); }
.photo-count { font-weight: 600; color: var(--dark); }

.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 9px; max-height: 430px; overflow-y: auto;
  padding: 3px; border: 1px solid var(--border-light); border-radius: 8px;
  background: var(--white);
}
.photo-cell {
  position: relative; border: 2px solid transparent; border-radius: 6px;
  overflow: hidden; cursor: pointer; background: var(--cream); padding: 0;
  aspect-ratio: 3 / 2;
}
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cell.picked { border-color: var(--accent); }
.photo-cell.hero   { border-color: var(--exp-black); }
/* Unchosen frames sit back so the chosen set reads at a glance. */
.photo-cell:not(.picked):not(.hero) img { opacity: .5; }
.photo-cell:hover img { opacity: 1; }

.photo-badge {
  position: absolute; top: 4px; left: 4px;
  background: var(--accent); color: var(--exp-black);
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
  border-radius: 3px; padding: 2px 6px; line-height: 1.4;
}
.photo-cell.hero .photo-badge { background: var(--exp-black); color: var(--white); }
.photo-star {
  position: absolute; top: 4px; right: 4px;
  background: rgba(255,255,255,.92); border: none; border-radius: 3px;
  font-size: 10px; font-weight: 600; color: var(--mid);
  padding: 2px 6px; cursor: pointer; line-height: 1.4;
}
.photo-star:hover { background: var(--white); color: var(--dark); }
.photo-res {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 9px; text-align: center; padding: 2px 0; line-height: 1.3;
}
.photo-add {
  aspect-ratio: 3 / 2; border: 2px dashed var(--border); border-radius: 6px;
  background: none; cursor: pointer; color: var(--muted);
  font-family: var(--font-body); font-size: 11.5px; line-height: 1.4;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px;
}
.photo-add:hover { border-color: var(--accent); color: var(--dark); }

/* ── Action bar ───────────────────────────────────────── */
.action-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white); border-top: 1px solid var(--border);
  padding: 13px 20px; display: flex; gap: 11px;
  align-items: center; justify-content: center; flex-wrap: wrap; z-index: 40;
}
/* Fit meter — the sheet is measured after it renders, not estimated, so
   this either says it fits or says exactly how much is over. */
.fit { font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 9px; }
.fit.ok   { color: var(--dark); }
.fit.over { color: var(--red); }
.fit-bar {
  width: 96px; height: 5px; border-radius: 3px;
  background: var(--border-light); overflow: hidden;
}
.fit-bar span { display: block; height: 100%; background: var(--accent); }
.fit.over .fit-bar span { background: var(--red); }
.btn-primary, .btn-secondary {
  padding: 11px 22px; font-family: var(--font-body); font-size: 13.5px;
  font-weight: 500; border-radius: 6px; cursor: pointer; border: 1px solid;
}
.btn-primary { background: var(--exp-black); color: var(--white); border-color: var(--exp-black); }
.btn-primary:hover { background: var(--exp-moss-grey); border-color: var(--exp-moss-grey); }
.btn-secondary { background: var(--white); color: var(--mid); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--dark); }
.bar-note { align-self: center; font-size: 12px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════
   THE SHEET
   One .fs-page == one physical sheet of paper.
   ═══════════════════════════════════════════════════════ */
.sheet-screen { padding: 26px 20px 108px; background: var(--off-white); }

.fs-page {
  width: 8.5in; min-height: 11in;
  margin: 0 auto 26px; padding: 0.45in 0.5in;
  background: var(--white); border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
/* Nothing on the sheet may be compressed to make it fit. A flex column shrinks
   its children by default, and the two blocks with overflow:hidden below
   (.fs-stats, .fs-hero) answer that by silently deleting their own content
   rather than getting shorter. An overlong sheet must LOOK overlong. */
.fs-page > * { flex-shrink: 0; }

/* ── Top band: photo + who to call ───────────────────────
   The photo no longer runs the full width. Standing the two
   broker cards beside it instead of under it removes a whole
   ~1in row from the page, and a narrower photo is a smaller
   photo — which is the right direction anyway, since a
   FlexMLS report ships 300px frames.
   ──────────────────────────────────────────────────────── */
.fs-band { display: flex; gap: 10px; align-items: stretch; min-height: 2in; }

.fs-hero {
  flex: 1; min-width: 0; overflow: hidden;
  border-radius: 3px; background: var(--exp-light-grey);
  display: flex; align-items: center; justify-content: center;
}
.fs-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-hero-empty { font-size: 12px; color: var(--muted); letter-spacing: .5px; }

/* The whole identity of the listing lives in this column: price, address, then
   who to call. Two things were wrong with the version before it —
     · two bordered cards sat next to the photo like a pair of business cards
       stapled to it, and read heavier than the house did;
     · the price in its own outlined box looked like a form field, not a
       headline.
   So: no boxes anywhere in here. The hierarchy is type size and a single
   frosted-blue rule, and the two contacts are marked by a colour bar rather
   than a border. Folding the address and price in also deletes the separate
   address row below, which is where most of the space came back from. */
.fs-band-side {
  width: 2.5in; flex-shrink: 0;
  display: flex; flex-direction: column;
}

.fs-price {
  font-family: var(--font-display); font-size: 37px; font-weight: 600;
  line-height: 1; letter-spacing: -.5px;
}
/* A short accent bar instead of an outline. Does the job the box was trying
   to do — says "this is the number" — without fencing it in. */
.fs-price-rule { width: 44px; height: 3px; background: var(--accent); margin: 9px 0 11px; }

.fs-addr {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  line-height: 1.16; letter-spacing: .1px;
}
.fs-city {
  font-size: 8.8px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--mid); margin-top: 5px; line-height: 1.45;
}

/* Pushed to the foot of the column so the contacts line up with the bottom of
   the photo however tall the address runs. */
.fs-who { margin-top: 13px; padding-left: 9px; border-left: 3px solid var(--border); }
.fs-who:first-of-type { margin-top: auto; padding-top: 2px; }
/* Niko's block carries the colour — he is the one standing in the house. */
.fs-who.host { border-left-color: var(--accent); }
.fs-who-role {
  font-size: 7.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600;
}
.fs-who-name { font-size: 14px; font-weight: 600; line-height: 1.15; margin-top: 2px; }
/* NMAC 16.61.32.8 note: the registered office phone is deliberately NOT here.
   The rule asks for the brokerage trade name + office phone at no less than
   33% of the associate broker's name size ONCE on the piece, and the contact
   card at the foot carries both on .card-brok (10.5px against a 16px name,
   ~66%). The trade name stays here at 8.5px against a 14px name (61%) for
   clarity. Do not remove .card-brok — it is the compliant instance. */
.fs-who-firm { font-size: 8.5px; color: var(--mid); margin-top: 1px; line-height: 1.35; }
.fs-who-phone { font-size: 11.5px; font-weight: 700; color: var(--dark); margin-top: 2px; }

/* ── Supplemental photos ──
   Four across puts each frame at ~1.75in wide. A 300px MLS photo
   at that size is about 170dpi, which is genuinely sharp — this
   is the size those files were always good for. */
/* Up to six photos stay on ONE row by taking one column each. That is not just
   tidier — it means dropping a photo to save space can never make the gallery
   taller, which a 3-across fallback would (three wide frames are 33% taller
   than four). The auto-fit pass relies on that being monotonic. */
.fs-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fs-gallery.g5 { grid-template-columns: repeat(5, 1fr); }
.fs-gallery.g6 { grid-template-columns: repeat(6, 1fr); }
/* 16:9 rather than the source 3:2 — a shallower crop of the same frame, and
   across a row of four it gives back nearly a fifth of an inch of page. */
.fs-shot {
  width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 2px; background: var(--cream);
}
.fs-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Stat strip ── */
/* Same frosted-blue fill as the host contact card, so the two blocks that
   carry the headline numbers and the headline name read as a pair. Black on
   this wash is 16.9:1 and moss grey is 4.5:1 — both clear AA. */
.fs-stats {
  display: flex; margin-top: 13px;
  background: rgba(145, 163, 201, .26);
  border: 1px solid var(--accent); border-radius: 4px; overflow: hidden;
}
.fs-stat { flex: 1; padding: 7px 6px 8px; text-align: center; }
.fs-stat + .fs-stat { border-left: 1px solid rgba(104, 102, 114, .22); }
.fs-stat-val { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1; }
.fs-stat-key { font-size: 8px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* ── Features ── */
.fs-sec { margin-top: 13px; }
/* Section rules are where frosted blue earns its place: a 2px band of it under
   a black heading gives the sheet its eXp colour without asking the blue to
   carry any text. */
.fs-sec-title {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--dark); font-weight: 600;
  padding-bottom: 5px; margin-bottom: 10px;
  border-bottom: 2px solid var(--accent);
}
.fs-features { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.fs-feat { break-inside: avoid; page-break-inside: avoid; }
.fs-feat-key { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.fs-feat-val { font-size: 11.5px; color: var(--dark); line-height: 1.4; margin-top: 1px; }

/* ── Remarks ── */
/* ONE RULE FOR INK ON THIS SHEET:
     moss grey = labels and boilerplate — the 8.5px feature keys, the stat
                 keys, the roles in the band, the legal fine print. Things you
                 read to find your way around the page.
     black     = content — feature values, the stat numbers, the price, and
                 this paragraph. Things you actually came to read.

   The description used to be moss grey, which made the only real prose on the
   sheet the lightest running text on it. It is content, so it is black, the
   same as the feature values beside it. Its paragraph shape already separates
   it from the scannable grid above — it does not need a second signal, and
   lightening the features instead would demote the thing buyers scan for. */
.fs-remarks { font-size: 11px; color: var(--dark); line-height: 1.62; text-align: justify; }

/* ── Room sizes ── */
.fs-rooms { width: 100%; border-collapse: collapse; }
.fs-rooms th {
  font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 600; text-align: left;
  padding: 0 8px 4px 0; border-bottom: 1px solid var(--border-light);
}
.fs-rooms td { font-size: 11px; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--border-light); }
.fs-rooms td:first-child { font-weight: 500; }

/* ── Contact card — the canonical lockup ──────────────── */
.fs-foot { margin-top: auto; padding-top: 10px; }
.fs-fine { font-size: 7.2px; color: var(--mid); line-height: 1.4; margin-bottom: 6px; }
.fs-fine strong { color: var(--dark); }
.card { border-top: 1px solid var(--border); padding-top: 9px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.card-photo { width: 64px; height: 64px; overflow: hidden; border-radius: 3px; flex-shrink: 0; }
.card-photo img { width: 64px; height: 64px; object-fit: cover; object-position: 15% 5%; transform: scale(1.8); transform-origin: 15% 5%; display: block; }
.card-mid { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.card-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: .3px; }
.card-title { font-size: 7.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.card-contact { font-size: 10.5px; font-weight: 700; color: var(--dark); }
/* NMAC 16.61.32.8 — 10.5px against the 16px name is ~66%. Floor is 5.3px.
   Size is what the rule governs; unbolded is fine. */
.card-brok { font-size: 10.5px; font-weight: 400; color: var(--mid); }
.card-city { font-size: 9.5px; color: var(--muted); }
.card-right { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; }
/* The lockup reads "eXp REALTY" on its own. No wordmark beneath it — the NMAC
   trade name + office phone lives on .card-brok, which is what the rule
   governs, so a third printing of the same two words buys nothing. */
/* 48px, up from 38px — Niko's call, Sep 2026: the lockup was sitting too
   small next to a 64px headshot. It reads as "eXp REALTY" on its own, so it is
   sized to be legible rather than tucked in a corner. This is branding, not
   disclosure: the NMAC 16.61.32.8 line is the TEXT on .card-brok, and scaling
   the logo has no bearing on that rule either way. */
.card-right img { height: 48px; width: auto; object-fit: contain; }

/* ═══════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════ */
@media print {
  @page { size: letter portrait; margin: 0; }

  body { background: var(--white); }
  .action-bar, .build-screen, .upload-screen, .no-print { display: none !important; }
  .sheet-screen { padding: 0; background: var(--white); }

  /* min-height, NEVER a fixed height.
     .fs-page is a flex column. With `height: 10.6in` its children inherit the
     default flex-shrink:1, so the moment the content is one line too tall the
     browser starts CRUSHING them rather than spilling onto a second page —
     and .fs-stats and .fs-hero both carry overflow:hidden for their rounded
     corners, so they do not just get short, they erase their own text and
     disappear. That is exactly what the first print test did: the broker strip,
     the stat strip and the hero photo all vanished while the fine print and
     contact card printed normally. Keep min-height + flex-shrink:0 so an
     overlong sheet runs onto page 2 where it can be seen and fixed. */
  .fs-page {
    width: 100%; min-height: 10.6in; height: auto;
    margin: 0; border: none; padding: 0.4in 0.5in;
    page-break-after: always; break-after: page;
  }
  .fs-page:last-child { page-break-after: auto; break-after: auto; }

  /* Nothing that reads as one unit may be split across the fold. */
  .fs-band, .fs-who, .fs-stats, .card, .fs-feat, .fs-rooms tr,
  .fs-gallery, .fs-shot, .fs-hero {
    page-break-inside: avoid; break-inside: avoid;
  }

  /* The gold rules and the tinted host cell carry the hierarchy — without this
     most browsers drop them and the sheet prints as flat grey text. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* SCREEN ONLY — and the `screen` keyword is load-bearing.
   A letter page is 8.5in, which a browser reports as 816px when it lays out
   for print. An unqualified `@media (max-width: 900px)` therefore fires ON
   PAPER, and because this block sits after the print block it wins: the first
   print test came out with the features in one column, the gallery three
   across, the brokers stacked and the page padding replaced by 18px. Every
   max-width block in this file must say `screen`. */
@media screen and (max-width: 900px) {
  .fs-page { width: 100%; padding: 22px 18px; }
  .fs-features { grid-template-columns: 1fr; }
  .fs-gallery, .fs-gallery.g3, .fs-gallery.g5 { grid-template-columns: repeat(3, 1fr); }
  .fs-band { flex-direction: column; min-height: 0; }
  .fs-hero { height: 2.2in; }
  .fs-band-side { width: 100%; flex-direction: row; }
  .fs-addr { font-size: 21px; }
  .fs-price { font-size: 30px; }
}