/* Investor analyzer, compare and report views (js/investor-app.js).
   Site tokens only (css/style.css --t-*): no colour literals. Logical
   properties throughout so the Urdu layout mirrors with dir="rtl". Every
   control is at least 44px tall; nothing scrolls the page sideways at 320px
   (wide tables scroll inside their own labelled region). */

.ia, .ia * { box-sizing: border-box; }
.ia { color: var(--t-ink); font-family: var(--t-font-body); font-size: var(--t-size-base); line-height: var(--t-leading-body); min-width: 0; }
/* Script fonts. The app is in the visitor's language only once its interface
   is translated; until then each translated passage carries its own lang (and
   dir), so the rules match the app itself or any node inside it. The Noto
   families are the stylesheets js/investor-app.js loads per language; a site
   token of the same name (--t-font-bn/-hi/-ur), if css/style.css gains one,
   wins. */
:is(.ia[lang="bn"], .ia [lang="bn"]) { font-family: var(--t-font-bn, 'Noto Sans Bengali', var(--t-font-body)); }
:is(.ia[lang="hi"], .ia [lang="hi"]) { font-family: var(--t-font-hi, 'Noto Sans Devanagari', var(--t-font-body)); }
:is(.ia[lang="ur"], .ia [lang="ur"]) { font-family: var(--t-font-ur, 'Noto Nastaliq Urdu', var(--t-font-body)); line-height: 2; }
.ia option[lang] { line-height: normal; }
.ia [hidden] { display: none !important; }
/* Right-to-left: each line takes its direction from its own text, so an
   English fallback inside the Urdu layout keeps its punctuation in place. */
.ia[dir="rtl"] :is(p, li, label, legend, h2, h3, h4, th, td, dt, dd > span, button, summary, caption, a) { unicode-bidi: plaintext; }
/* An Urdu passage inside the English form: right-to-left, start-aligned. */
.ia[dir="ltr"] [dir="rtl"] { text-align: start; unicode-bidi: isolate; }
.ia [data-fallback] { font-family: var(--t-font-body); }
/* The hidden box sits at its own start edge with no negative margin: in the
   right-to-left app a box left where it falls (or pulled by margin: -1px)
   ends 1px past the viewport's right edge and the page scrolls sideways. */
.ia-vh { position: absolute !important; inset-inline-start: 0; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ia :is(h2, h3, h4, p, label, legend, dt, dd, th, td, li, button, a) { overflow-wrap: anywhere; }
.ia p { margin-block: var(--t-space-2); }
.ia-h2 { font: 700 var(--t-size-lg)/var(--t-leading-tight) var(--t-font-body); margin-block: 0 var(--t-space-3); }
.ia-h3 { font: 650 var(--t-size-md)/var(--t-leading-tight) var(--t-font-body); margin-block: var(--t-space-5) var(--t-space-3); }
.ia-h4 { font: 650 var(--t-size-base)/var(--t-leading-tight) var(--t-font-body); margin-block: var(--t-space-4) var(--t-space-2); }
.ia-muted, .ia-fine { color: var(--t-ink-3); font-size: var(--t-size-sm); }
.ia-fine { font-size: var(--t-size-xs); }
.ia-eyebrow { color: var(--t-ink-3); font-size: var(--t-size-xs); letter-spacing: 0.04em; text-transform: uppercase; }
.ia-num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap; }
.ia-neg { color: var(--t-crit); }
.ia-pos { color: var(--t-ok); }

/* Focus is always visible. */
.ia :is(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--t-gold-ink); outline-offset: 2px; border-radius: var(--t-radius-sm);
}

/* ── Bar: strategy, view, language, compare ─────────────────────────── */
.ia-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--t-space-3) var(--t-space-4); margin-block-end: var(--t-space-4);
  padding: var(--t-space-4); background: var(--t-surface-1); border: 1px solid var(--t-line); border-radius: var(--t-radius-lg); }
.ia-bar-item { display: flex; flex-direction: column; gap: var(--t-space-1); min-width: 0; flex: 0 1 auto; }
.ia-bar-strategy { flex: 1 1 260px; }
.ia-bar label, .ia-seg legend { font-size: var(--t-size-sm); font-weight: 600; color: var(--t-ink-2); }

.ia-select, .ia-input {
  min-height: 44px; max-width: 100%; font: inherit; font-size: var(--t-size-base); color: var(--t-ink);
  background: var(--t-canvas); border: 1px solid var(--t-ink-3); border-radius: var(--t-radius-sm); padding-block: var(--t-space-2); padding-inline: var(--t-space-3);
}
.ia-input { width: 100%; min-width: 0; }
.ia-input--sm { min-height: 44px; font-size: var(--t-size-sm); }
.ia-input[aria-invalid="true"] { border-color: var(--t-crit); }

.ia-seg { display: flex; flex-wrap: wrap; gap: var(--t-space-1); border: 0; margin: 0; padding: 0; min-width: 0; }
.ia-seg legend { padding: 0; margin-block-end: var(--t-space-1); width: 100%; }
.ia-seg-opt { position: relative; display: inline-flex; }
.ia-seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ia-seg-opt label { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--t-space-4); border: 1px solid var(--t-line);
  border-radius: var(--t-radius-pill); background: var(--t-canvas); color: var(--t-ink-2); font-weight: 600; cursor: pointer; }
.ia-seg-opt input:checked + label { background: var(--t-gold-soft); border-color: var(--t-gold-line); color: var(--t-ink); }
.ia-seg-opt input:focus-visible + label { outline: 3px solid var(--t-gold-ink); outline-offset: 2px; }

.ia-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--t-space-2); min-height: 44px; padding-inline: var(--t-space-4);
  font: 600 var(--t-size-sm)/1.2 var(--t-font-body); color: var(--t-ink); background: var(--t-btn2-bg, var(--t-canvas));
  border: 1px solid var(--t-btn2-line, var(--t-line)); border-radius: var(--t-radius-pill); cursor: pointer; text-decoration: none; text-align: center; }
.ia-btn:hover { border-color: var(--t-gold-ink); }
.ia-btn--primary { background: var(--t-gold-fill); border-color: var(--t-gold-fill); color: var(--t-on-primary, var(--t-canvas)); }
.ia-btn--primary:hover { background: var(--t-gold-fill-hover, var(--t-gold-fill)); }
.ia-btn--quiet { background: transparent; border-color: transparent; color: var(--t-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.ia-btn--offer { min-height: 44px; font-weight: 500; border-style: dashed; }
.ia-btn--link { min-height: 44px; min-inline-size: 44px; padding-inline: var(--t-space-2); background: transparent; border: 0; color: var(--t-gold-ink); text-decoration: underline; }
.ia-link { color: var(--t-gold-ink); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }

.ia-mt, .ia-notice, .ia-banner { padding: var(--t-space-3) var(--t-space-4); border-radius: var(--t-radius-md); background: var(--t-surface-1);
  border-inline-start: 4px solid var(--t-gold-line); font-size: var(--t-size-sm); }
.ia-banner--warn { border-inline-start-color: var(--t-warn); background: color-mix(in srgb, var(--t-warn) 10%, var(--t-canvas)); }
.ia-banner--crit { border-inline-start-color: var(--t-crit); background: color-mix(in srgb, var(--t-crit) 10%, var(--t-canvas)); }
.ia-banner--ok { border-inline-start-color: var(--t-ok); background: color-mix(in srgb, var(--t-ok) 10%, var(--t-canvas)); }

/* ── Listing card (CREA DDF) ─────────────────────────────────────────── */
.ia-listing { margin-block-end: var(--t-space-4); padding: var(--t-space-4); border: 1px solid var(--t-line); border-radius: var(--t-radius-lg); background: var(--t-surface-1); }
.ia-listing-addr { font-weight: 700; font-size: var(--t-size-md); }
.ia-listing-price { font-size: var(--t-size-md); }
.ia-listing-office { font-weight: 600; color: var(--t-ink-2); }
/* A line translated after the language was reviewed; the note at the top
   (ui.lang.reviewedPartly) says what the mark means. */
.ia [data-mt]::after { content: "\00a0\2020"; color: var(--t-ink-3); }

/* ── Layout ─────────────────────────────────────────────────────────── */
.ia-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--t-space-5); }
@media (min-width: 1100px) {
  .ia[data-mode="analyze"] .ia-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .ia[data-mode="analyze"] .ia-results { position: sticky; top: calc(var(--header-h, 80px) + var(--t-space-3)); max-height: calc(100vh - var(--header-h, 80px) - var(--t-space-5)); overflow-y: auto; }
}

/* ── Form ───────────────────────────────────────────────────────────── */
.ia-form { min-width: 0; }
.ia-intro { color: var(--t-ink-2); font-size: var(--t-size-sm); }
.ia-section { border: 1px solid var(--t-line); border-radius: var(--t-radius-lg); margin: 0 0 var(--t-space-4); padding: var(--t-space-4); min-width: 0; background: var(--t-canvas); }
.ia-section > legend { font: 700 var(--t-size-md)/var(--t-leading-tight) var(--t-font-body); padding-inline: var(--t-space-2); }
.ia-field { display: flex; flex-direction: column; gap: var(--t-space-1); margin-block: var(--t-space-3); min-width: 0; }
.ia-field-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-space-2); min-width: 0; }
.ia-field-head label { font-weight: 600; }
.ia-req { font-size: var(--t-size-xs); color: var(--t-ink-3); }
.ia-field--optional .ia-req { font-style: italic; }
.ia-field-row { display: flex; flex-wrap: wrap; gap: var(--t-space-2); align-items: stretch; min-width: 0; }
.ia-field-row .ia-input { flex: 1 1 140px; }
.ia-unit { flex: 0 1 auto; }
.ia-unit-fixed { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--t-space-2); color: var(--t-ink-3); font-size: var(--t-size-sm); }
.ia-chip { flex: 0 1 auto; font-size: var(--t-size-sm); border-radius: var(--t-radius-pill); }
.ia-chip--documented { border-color: var(--t-ok); }
.ia-chip--claim { border-color: var(--t-gold-ink); }
.ia-chip--estimate, .ia-chip--assumption { border-color: var(--t-warn); }
.ia-chip--unknown { border-color: var(--t-ink-3); border-style: dashed; }
.ia-chip-static { display: inline-block; padding: 2px var(--t-space-2); border: 1px solid var(--t-line); border-radius: var(--t-radius-pill); font-size: var(--t-size-xs); }
.ia-explain { min-width: 44px; min-height: 44px; border-radius: var(--t-radius-pill); border: 1px solid var(--t-line); background: var(--t-surface-1); color: var(--t-ink-2); font-weight: 700; cursor: pointer; }
.ia-help { margin: 0; padding: var(--t-space-2) var(--t-space-3); background: var(--t-surface-1); border-radius: var(--t-radius-sm); font-size: var(--t-size-sm); color: var(--t-ink-2); }
.ia-err { color: var(--t-crit); font-size: var(--t-size-sm); margin: 0; }
.ia-offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-space-2); }
.ia-offer-note, .ia-source { font-size: var(--t-size-xs); color: var(--t-ink-3); margin: 0; }
.ia-field-pro { display: flex; flex-wrap: wrap; gap: var(--t-space-2); padding-block-start: var(--t-space-1); }
.ia-mini { display: flex; flex-direction: column; gap: 2px; flex: 1 1 110px; min-width: 0; font-size: var(--t-size-xs); color: var(--t-ink-3); }
.ia-mini--wide { flex: 2 1 200px; }
.ia-check { display: flex; align-items: center; gap: var(--t-space-2); min-height: 44px; margin-block: var(--t-space-1); }
.ia-check input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--t-gold-ink); }
/* The whole row is the tap target: the label fills it to 44px. */
.ia-check label { display: flex; align-items: center; flex: 1 1 auto; min-height: 44px; padding-block: var(--t-space-2); cursor: pointer; }
.ia-multi, .ia-seg--tri { border: 0; padding: 0; margin: var(--t-space-3) 0; min-width: 0; }
.ia-multi legend, .ia-seg--tri legend, .ia-list > legend { font-weight: 600; padding: 0; }
.ia-multi { display: flex; flex-wrap: wrap; gap: 0 var(--t-space-4); }
.ia-list { border: 0; padding: 0; margin: var(--t-space-3) 0; min-width: 0; }
.ia-item { border: 1px solid var(--t-line); border-radius: var(--t-radius-md); padding: var(--t-space-3); margin-block: var(--t-space-2); background: var(--t-surface-1); }
.ia-item .ia-item { background: var(--t-canvas); }
.ia-item-title { font-weight: 700; margin: 0; }
.ia-add { margin-block-start: var(--t-space-2); }
.ia-actions { display: flex; flex-wrap: wrap; gap: var(--t-space-2); margin-block: var(--t-space-4); }

/* ── Results ────────────────────────────────────────────────────────── */
.ia-results { min-width: 0; padding: var(--t-space-4); border: 1px solid var(--t-line); border-radius: var(--t-radius-lg); background: var(--t-surface-1); }
.ia-results:focus { outline: none; }
.ia-results:focus-visible { outline: 3px solid var(--t-gold-ink); }
.ia-empty { margin-block: 0 var(--t-space-3); color: var(--t-ink-2); }
.ia-buy { margin-block-end: var(--t-space-3); }
.ia-buy-text { font-size: var(--t-size-md); font-weight: 600; margin-block-start: 0; }
.ia-tablist { display: flex; flex-wrap: wrap; gap: var(--t-space-1); border-block-end: 1px solid var(--t-line); margin-block-end: var(--t-space-3); }
.ia-tab { min-height: 44px; padding-inline: var(--t-space-3); font: 600 var(--t-size-sm)/1.2 var(--t-font-body); color: var(--t-ink-2);
  background: transparent; border: 0; border-block-end: 3px solid transparent; cursor: pointer; }
.ia-tab[aria-selected="true"] { color: var(--t-ink); border-block-end-color: var(--t-gold-ink); }
.ia-panel:focus-visible { outline: 3px solid var(--t-gold-ink); }
.ia-simple { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.ia-simple dt { display: flex; align-items: center; gap: var(--t-space-2); justify-content: space-between; font-weight: 600; color: var(--t-ink-2); padding-block-start: var(--t-space-3); border-block-start: 1px solid var(--t-line); }
.ia-simple dt:first-child { border-block-start: 0; }
.ia-simple dd { margin: 0; padding-block-end: var(--t-space-2); display: flex; flex-direction: column; gap: 2px; }
.ia-simple dd > .ia-num { font-size: var(--t-size-lg); font-weight: 700; }
.ia-sub { font-size: var(--t-size-sm); color: var(--t-ink-3); }
.ia-reason { color: var(--t-ink-2); }
.ia-bullets { margin: 0; padding-inline-start: var(--t-space-5); }
.ia-bullets li { margin-block: var(--t-space-1); }
.ia-bullets--compact li { margin-block: 0; font-size: var(--t-size-sm); }

.ia-table-wrap { overflow-x: auto; max-width: 100%; margin-block: var(--t-space-3); border: 1px solid var(--t-line); border-radius: var(--t-radius-md); background: var(--t-canvas); }
.ia-table { width: 100%; border-collapse: collapse; font-size: var(--t-size-sm); }
.ia-table caption { text-align: start; font-weight: 700; padding: var(--t-space-2) var(--t-space-3); }
.ia-table th, .ia-table td { padding: var(--t-space-2) var(--t-space-3); border-block-start: 1px solid var(--t-line); text-align: start; vertical-align: top; }
.ia-table thead th { color: var(--t-ink-3); font-weight: 600; font-size: var(--t-size-xs); }
.ia-table .ia-r { text-align: end; }
.ia-table tbody th { font-weight: 500; }
.ia-line--subtotal th, .ia-line--subtotal td, .ia-line--total th, .ia-line--total td { font-weight: 700; }
.ia-line--total th, .ia-line--total td { border-block-start: 2px solid var(--t-ink-3); }
.ia-line--memo th, .ia-line--memo td { color: var(--t-ink-3); font-size: var(--t-size-xs); }
.ia-grade { display: inline-block; padding: 2px var(--t-space-2); border-radius: var(--t-radius-pill); font-size: var(--t-size-xs); font-weight: 700; border: 1px solid var(--t-line); }
.ia-grade--documented { border-color: var(--t-ok); color: var(--t-ok); }
.ia-grade--claimed { border-color: var(--t-gold-ink); color: var(--t-gold-ink); }
.ia-grade--estimated { border-color: var(--t-warn); color: var(--t-warn); }
.ia-grade--unknown { border-style: dashed; color: var(--t-ink-3); }
.ia-details { margin-block: var(--t-space-3); }
.ia-details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.ia-flag-list { list-style: none; margin: 0; padding: 0; }
.ia-flag { padding: var(--t-space-2) var(--t-space-3); margin-block: var(--t-space-1); border-radius: var(--t-radius-sm); background: var(--t-canvas); border-inline-start: 3px solid var(--t-line); font-size: var(--t-size-sm); }
.ia-flag--warn { border-inline-start-color: var(--t-warn); }
.ia-sev { font-weight: 700; font-size: var(--t-size-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--t-ink-3); }
.ia-outcome { font-size: var(--t-size-md); }
.ia-outcome--matches strong { color: var(--t-ok); }
.ia-outcome--does-not-meet strong { color: var(--t-crit); }
.ia-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--t-space-3); }
.ia-score { padding: var(--t-space-3); border: 1px solid var(--t-line); border-radius: var(--t-radius-md); background: var(--t-canvas); min-width: 0; }
.ia-score-name { font-weight: 700; margin: 0; }
.ia-score-value { font-size: var(--t-size-md); font-weight: 700; }
.ia-pro-block { border-block-start: 1px solid var(--t-line); margin-block-start: var(--t-space-4); }
.ia-solver { display: flex; flex-wrap: wrap; gap: var(--t-space-2); align-items: flex-end; }
.ia-solver-result { font-weight: 600; }
.ia-eq { padding-inline-start: var(--t-space-5); font-size: var(--t-size-sm); }
.ia-defs dt { font-weight: 600; font-size: var(--t-size-sm); }
.ia-defs dd { margin-inline-start: 0; margin-block-end: var(--t-space-2); font-size: var(--t-size-sm); color: var(--t-ink-2); }
.ia-exports { border-block-start: 1px solid var(--t-line); margin-block-start: var(--t-space-4); }
.ia-share { display: flex; flex-direction: column; gap: var(--t-space-1); }
.ia-compare { min-width: 0; }
/* Listings added from a compare link: MLS® number, brokerage, REALTOR.ca. */
.ia-compare-listings { margin-block-start: var(--t-space-4); }
.ia-compare-skipped { margin: 0; }
.ia-comments { margin-block-start: var(--t-space-5); padding: var(--t-space-4); border: 1px solid var(--t-line); border-radius: var(--t-radius-lg); background: var(--t-surface-1); }
.ia-comment-text { white-space: pre-line; }
.ia-report-head { margin-block-end: var(--t-space-3); }
.ia-print-foot { display: none; }

/* ── Lead ask on the analyzer page (after the analysis, never a gate) ── */
.ia-lead { margin-block: var(--t-space-6) var(--t-space-4); padding: var(--t-space-5); border: 1px solid var(--t-line); border-radius: var(--t-radius-lg);
  background: var(--t-surface-1); color: var(--t-ink); font-family: var(--t-font-body); }
.ia-lead h2 { font: 700 var(--t-size-lg)/var(--t-leading-tight) var(--t-font-body); margin-block: 0 var(--t-space-2); }
.ia-lead-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--t-space-3); margin-block-start: var(--t-space-3); }
.ia-lead-field { display: flex; flex-direction: column; gap: var(--t-space-1); min-width: 0; }
.ia-lead-field label { font-weight: 600; font-size: var(--t-size-sm); }
.ia-lead-form .ia-btn { align-self: end; }

@media (max-width: 480px) {
  .ia-bar, .ia-section, .ia-results, .ia-listing { padding: var(--t-space-3); }
  .ia-section { padding-inline: var(--t-space-3); }
  .ia-field-row .ia-input { flex-basis: 100%; }
  .ia-unit, .ia-chip { flex: 1 1 120px; }
}

/* ── Print / PDF ─────────────────────────────────────────────────────── */
@media print {
  @page { margin: 16mm 14mm 22mm; }
  .ia { font-size: 10.5pt; }
  .ia-bar, .ia-form, .ia-actions, .ia-explain, .ia-tablist, .ia-share, .ia-btn, .ia-offer, .ia-notice { display: none !important; }
  .ia-layout { display: block; }
  .ia-results, .ia[data-mode="analyze"] .ia-results { position: static; max-height: none; overflow: visible; border: 0; padding: 0; background: none; }
  .ia-table-wrap { overflow: visible; border: 0; }
  .ia-table, .ia-score, .ia-simple dd, .ia-flag, .ia-assess-block, .ia-pro-block, .ia-listing { break-inside: avoid; }
  .ia-table thead { display: table-header-group; }
  .ia-details:not([open]) > :not(summary) { display: block; }
  .ia-print-foot { display: block; position: fixed; inset-inline: 0; bottom: 0; padding-block: 4mm 0; font-size: 8pt; color: var(--t-ink-2);
    border-block-start: 1px solid var(--t-line); background: var(--t-canvas); text-align: center; }
  /* .cc-toast: the cookie choice (js/consent.js) is fixed to the viewport
     and would print over the results on every page. */
  .site-header, .site-footer, .nav-drawer, .mobile-sticky-bar, .ia-lead, .cc-toast { display: none !important; }
}

/* A table directly under its own heading keeps its caption for screen readers only. */
.ia-pro-block > .ia-table-wrap .ia-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }