/* Utility and reset shim for the buyer calculator (web/calculator/calculator.jsx).

   The component was authored in the claude.ai artifact frame, which ships
   Tailwind. The dashboard does not load Tailwind, so the utility classes the
   component uses are reproduced here at Tailwind's own values, scoped under
   .flc (the component's root element), together with the few Tailwind
   "preflight" resets its layout depends on. Nothing in this file is dashboard
   chrome; the component's palette is FHS blue since 2026-09-24 (style guide
   §10). Do not reuse these classes elsewhere. */

/* Preflight subset */
.flc { line-height: 1.5; -webkit-text-size-adjust: 100%; }

/* Renders the component at 125% of its declared sizes — text, controls and
   spacing together — so it reads on the dashboard the way it reads in the
   claude.ai tab where it was designed (measured there at 1.25x on 2026-09-10,
   Chris's call). The frame width is unchanged; the inner column simply has
   fewer zoomed pixels to fill. Scoped to the component, nothing outside it.
   Phones stay at 100%: at 125% on a 390px screen the mode toggle wrapped to
   two lines, and the artifact never rendered larger than 100% on a phone. */
@media (min-width: 600px) {
  .flc { zoom: 1.25; }
}

/* When a section opens it scrolls itself to the top of the viewport. The
   component's own margin is 14px, which was right in the artifact frame; under
   the dashboard's sticky nav the header vanished behind the bar. --nav-h is the
   measured height of .fhs-nav (set by web/calculator/index.html, fallback 57px).
   Inside the zoomed block a length is scaled by the zoom, so the desktop value
   divides by 1.25 to land at the real nav height plus 14px. */
#calculator-root {
  --section-scroll-margin: calc((var(--nav-h, 57px) + 14px) / 1.25);
}
@media (max-width: 599px) {
  #calculator-root {
    --section-scroll-margin: calc(var(--nav-h, 49px) + 14px);
  }
}
.flc *, .flc *::before, .flc *::after { box-sizing: border-box; border-width: 0; border-style: solid; }
.flc h1, .flc h2, .flc h3, .flc p { margin: 0; font-size: inherit; font-weight: inherit; }
.flc button, .flc input, .flc select, .flc textarea {
  font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; padding: 0;
}
.flc button { background-color: transparent; background-image: none; cursor: pointer; }
.flc img, .flc svg { display: block; vertical-align: middle; }
.flc input::placeholder, .flc textarea::placeholder { color: #94a3b8; opacity: 1; }

/* Layout */
.flc .flex { display: flex; }
.flc .block { display: block; }
.flc .flex-wrap { flex-wrap: wrap; }
.flc .items-center { align-items: center; }
.flc .items-baseline { align-items: baseline; }
.flc .justify-between { justify-content: space-between; }
.flc .justify-center { justify-content: center; }
.flc .w-full { width: 100%; }
.flc .rounded { border-radius: 0.25rem; }
.flc .outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.flc .text-left { text-align: left; }

/* Type */
.flc .text-xs { font-size: 0.75rem; line-height: 1rem; }
.flc .text-sm { font-size: 0.875rem; line-height: 1.25rem; }

/* Spacing (Tailwind scale: 1 = 0.25rem) */
.flc .p-3 { padding: 0.75rem; }
.flc .p-4 { padding: 1rem; }
.flc .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.flc .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.flc .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.flc .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.flc .pt-2 { padding-top: 0.5rem; }
.flc .pt-3 { padding-top: 0.75rem; }
.flc .pb-4 { padding-bottom: 1rem; }
.flc .pl-3 { padding-left: 0.75rem; }
.flc .pr-3 { padding-right: 0.75rem; }
.flc .mb-1 { margin-bottom: 0.25rem; }
.flc .mb-2 { margin-bottom: 0.5rem; }
.flc .mb-3 { margin-bottom: 0.75rem; }
.flc .mb-4 { margin-bottom: 1rem; }
.flc .mb-5 { margin-bottom: 1.25rem; }
.flc .mt-1 { margin-top: 0.25rem; }
.flc .mt-2 { margin-top: 0.5rem; }
.flc .mt-3 { margin-top: 0.75rem; }
.flc .mt-4 { margin-top: 1rem; }
.flc .mt-5 { margin-top: 1.25rem; }

/* Down payment / loan / LTV strip (LoanStrip in calculator.jsx): three equal
   columns in every mode; on a phone the figures shrink so a seven-digit price
   still fits its column. !important because the component sets its desktop
   sizes inline (the claude.ai artifact frame has no stylesheet). */
@media (max-width: 599px) {
  .flc [data-strip] { gap: 8px !important; }
  .flc [data-strip] .strip-value { font-size: 15px !important; }
}

/* Phones get no download: the PDF is a desktop hand-out (Chris, 2026-09-11).
   The button stays in the markup; this hides it below the phone breakpoint. */
@media (max-width: 599px) {
  .flc button[aria-label="Download this estimate as a PDF"] { display: none !important; }
}

/* phone audit 2026-09-25: the two small-print paragraphs are justified inline; left-aligned on a phone */
@media (max-width: 599px) { .flc p[style*="justify"] { text-align: left !important; } }