/* ==========================================================================
   page-fmr.css — Fair Market Rent page
   --------------------------------------------------------------------------
   Loaded by /fmr-restyled.php only, AFTER app.css + utils.css + shell.css.

   This file used to carry a copied tail of `main[data-page="crime"]` and
   `main[data-page="invoices"]` rules — the stylesheet split duplicated a
   shared block into every page sheet instead of splitting it. Those rules
   are gone from here; each page sheet now owns only its own page.

   The page markup uses the shared vocabulary (.dash-top, .panel, .figstrip,
   .btn, .input, .field). Everything below is genuinely FMR-specific.
   ========================================================================== */

/* --- search row --------------------------------------------------------- *
 * One line on desktop: label+input grows, button sits flush at the end.
 * The old version was a 760px card floating centred in a 1440px page, which
 * is what left acres of empty grey below the fold.
 * ------------------------------------------------------------------------ */
.fmr-search{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
}
/* Integrated control: icon + input as one object. The old floating "ZIP code"
   label sat above the panel edge and read as a stray bit of text. */
.fmr-search-ctl{position:relative;flex:0 1 380px;min-width:0}
.fmr-search-ico{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--text-3);pointer-events:none;
}
.fmr-search-ctl .input{
  padding-left:40px;height:46px;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.fmr-search .btn{flex:0 0 auto;height:46px}

/* Portfolio ZIP shortcuts. The page used to be a search box over an empty
   screen; these give it something to do the moment it loads. */
.fmr-quick{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--hair);
}
.fmr-quick .eyebrow{margin-right:var(--s1)}
.fmr-zip{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:background var(--fast),color var(--fast),border-color var(--fast);
}
.fmr-zip:hover{background:var(--text);color:var(--surface);border-color:var(--text)}

/* --- loading ------------------------------------------------------------ */
.fmr-loading{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s6) 0;
}
.loading-spinner{
  width:18px;height:18px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--hair);border-top-color:var(--text-2);
  animation:fmr-spin .7s linear infinite;
}
@keyframes fmr-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){ .loading-spinner{animation:none} }

/* --- results ------------------------------------------------------------ */
.fmr-results-top{padding:var(--s5) 0 var(--s3)}
.fmr-results-top .h2{margin:0}
.fmr-results-top .dim{margin:2px 0 0}
.fmr-results{display:grid;gap:var(--s4)}
.fmr-results:not(:empty){margin-bottom:var(--s4)}   /* was butting into the explainer */

.fmr-card{overflow:hidden}

/* --- headline block ----------------------------------------------------- *
 * Four equal grey cells told you nothing. One dominant figure carries the
 * page; the rest becomes supporting scale below it.
 * ------------------------------------------------------------------------ */
.fmr-lead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--s6);align-items:start;
  padding:var(--s6) var(--s5);
  border-bottom:1px solid var(--hair);
}
.fmr-lead-fig{display:flex;flex-direction:column}
.fmr-lead-v{
  display:block;margin-top:6px;font-size:56px;font-weight:800;
  letter-spacing:-.045em;line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.fmr-lead-yr{margin-top:8px;font-size:14px}
.fmr-lead-note{
  padding-left:var(--s6);border-left:1px solid var(--hair);
}
.fmr-lead-range{
  margin:6px 0 8px;font-size:20px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.fmr-lead-note p.dim{margin:0;font-size:13px;line-height:1.55;max-width:40ch}

/* --- proportional scale ------------------------------------------------- */
.fmr-scale{padding:var(--s4) var(--s5) var(--s5)}
.fmr-row{
  display:grid;
  grid-template-columns:64px minmax(80px,1fr) 92px 84px 62px;
  align-items:center;gap:var(--s4);
  padding:11px 0;border-bottom:1px solid var(--hair);
}
.fmr-row:last-child{border-bottom:0}
.fmr-row-head{
  padding:0 0 9px;border-bottom:1px solid var(--hair);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);
}
.fmr-row-k{font-size:13.5px;font-weight:600;color:var(--text-2)}
.fmr-row.is-lead .fmr-row-k,
.fmr-row.is-lead .fmr-row-v{color:var(--text)}
.fmr-row-bar{display:block;height:8px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.fmr-row-head .fmr-row-bar{background:none}
.fmr-row-bar > i{
  display:block;height:100%;border-radius:var(--r-pill);
  background:var(--text-3);transition:width .45s cubic-bezier(.2,.7,.3,1);
}
.fmr-row.is-lead .fmr-row-bar > i{background:var(--text)}
.fmr-row-v{font-size:19px;font-weight:700;letter-spacing:-.018em;text-align:right;color:var(--text-2)}
.fmr-row.is-lead .fmr-row-v{font-size:21px}
.fmr-row-yr,.fmr-row-d{font-size:13px;text-align:right;color:var(--text-3)}
.fmr-row-d{font-weight:600}
@media(prefers-reduced-motion:reduce){ .fmr-row-bar > i{transition:none} }
.fmr-card-head{align-items:flex-start;gap:var(--s4)}
/* the icon was dropping onto its own line and hanging under the link text */
.fmr-card-head .more{flex:0 0 auto;white-space:nowrap;align-items:center}
.fmr-card-sub{margin:3px 0 0;font-size:13px}

/* The strip sits flush inside the panel: kill its standalone chrome so it
   reads as one object with the header rather than a card inside a card. */
.fmr-figstrip{
  margin:0;border-radius:0;box-shadow:none;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.fmr-card-foot{font-size:12.5px}

/* --- explainer ---------------------------------------------------------- */
.fmr-note-lede{margin:0 0 var(--s5);max-width:76ch}
.fmr-note-grid{grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.fmr-note p{margin:6px 0 0;font-size:13.5px;color:var(--text-2);line-height:1.55}
.fmr-note-fig{
  display:block;margin-bottom:10px;font-size:34px;font-weight:800;
  letter-spacing:-.04em;line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.fmr-note-unit{margin-left:3px;font-size:14px;font-weight:600;color:var(--text-3);letter-spacing:0}

/* --- empty / error ------------------------------------------------------ */
.fmr-empty{padding:var(--s7) var(--s5);text-align:center}
.fmr-empty .empty-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-bottom:var(--s3);
  border-radius:var(--r-md);background:var(--surface-2);color:var(--text-3);
}
.fmr-empty .empty-ico svg{width:20px;height:20px}
.fmr-empty .h3{margin:0 0 4px}
.fmr-empty .dim{margin:0 auto;max-width:48ch}

/* --- mobile ------------------------------------------------------------- */
@media(max-width:1080px){
  .fmr-lead{grid-template-columns:1fr;gap:var(--s5)}
  .fmr-lead-note{padding-left:0;border-left:0;padding-top:var(--s5);border-top:1px solid var(--hair)}
}
@media(max-width:860px){
  .fmr-search{gap:var(--s3)}
  .fmr-search-ctl{flex:1 1 100%}
  .fmr-search .btn{width:100%}
  .fmr-note-grid{grid-template-columns:1fr;gap:var(--s5)}
  .fmr-lead-v{font-size:44px}
  .fmr-row{grid-template-columns:56px minmax(50px,1fr) 78px 58px;gap:var(--s3)}
  .fmr-row-yr{display:none}
  .fmr-row-head .fmr-row-yr{display:none}
}

/* --- entrance (JS adds these on render) --------------------------------- */
@keyframes fmr-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fmr-scale{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.animate-fade-in{animation:fmr-fade .28s ease both}
.animate-scale-in{animation:fmr-scale .22s ease both}
@media(prefers-reduced-motion:reduce){
  .animate-fade-in,.animate-scale-in{animation:none}
}

/* the header block was pushing the search a long way down the page */
main[data-page="fmr"] .dash-top{padding:var(--s5) 0 var(--s4)}
main[data-page="fmr"] .fmr-searchwrap{margin-bottom:var(--s3)}
/* .panel-pad is padding:0 s5 s5 — it deliberately has NO top padding because it
   normally follows a .panel-head. This panel has no head, so the controls were
   touching the top edge of the card. */
.fmr-searchwrap .panel-pad{padding-top:var(--s5)}