/* pages.css — the development, district and knowledge-base views
   (public/js/pages.js, public/js/kb.js), reached via ?dev=/?district=/?kb=
   rather than a lookup. See base.css for shared primitives and result.css
   for the valuation card these pages link back to. */

/* Same card language as the estimate card (result.css's .prop-estimate) and
   the same heading scale as the page's own <h1> (base.css's .view-header
   h1) — #devPage/#districtPage used to be a bare, unstyled <div> with a
   browser-default <h2>, which read as abandoned next to the redesigned
   result view. Presentation only: renderDevPage()/renderDistrictPage()
   (pages.js) still emit the same markup, just now living inside a styled
   container. */
.prop-page {
  margin-top: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
}
.prop-page h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: .35rem;
}

/* ---- Dev/district trend charts (chart.js's salesChart(), pages.js's own
   districtTrendChart()) ---- */
.ct { display: block; max-width: 100%; margin: .5rem 0; }
.ct-grid { stroke: var(--border); stroke-width: 1; }
.ct-axis { fill: var(--text-muted); font-size: 11px; }
/* Dashed AND coloured: the dash is what distinguishes the market line for a
   reader who cannot separate the two hues. */
.ct-line { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.ct-dot { fill: var(--green); opacity: .75; }
/* The district's own quarterly median. Solid where .ct-line is dashed: the
   dash is what separates the market index from the district for a reader
   who cannot separate the two hues. */
.ct-district-median { stroke: var(--green); stroke-width: 2; }
.ct-legend { color: var(--text-muted); font-size: .85rem; margin: .25rem 0 .75rem; }

/* A grid of cards for browsing — property.js's HDB/private explore panel
   (the two market cards above #propResult, see index.html) is the first
   caller; the district page's project list and the KB index are candidates
   for the same treatment later. Collapses to one column on a narrow screen
   without a media query. */
.explore-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---- Explore panel (property.js's HDB/private browse tools) ----
   The problem this solves: the tabs used to sit BELOW the entire result, so
   a first-time visitor could not tell the tool covered condos at all until
   after running a lookup. Now two cards sit side by side above #propResult,
   each permanently labelled with its market and a one-line description —
   that part never hides, regardless of which tab is active — so coverage is
   visible before a search runs.

   The card header IS the tab: .explore-card-head carries .prop-tab
   (result.css) for its existing click/active wiring and data-tab attribute
   (property.js's initProperty() and setPropertyTab() are unchanged), just
   restyled here from a strip of underlined labels into a full-width header.
   Only the tool body below it (#propTabHdb/#propTabPrivate, still toggled
   by setPropertyTab() exactly as before) hides — the header carrying the
   market's name never does. Active-state colour is given its own
   three-class selector (.explore-card-head.prop-tab.active) rather than
   relying on result.css's .prop-tab.active, because that rule and this
   file's own reset below share the same specificity (0,2,0) and pages.css
   loading after result.css would otherwise let the plain grey border here
   always win, silently killing the active indicator. */
.explore-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.explore-card-head.prop-tab {
  display: block;
  width: 100%;
  text-align: left;
  padding: .9rem 1.1rem;
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}
.explore-card-head.prop-tab.active {
  border-bottom: 2px solid var(--accent);
  color: var(--text);
}
.explore-card-title { display: block; font-size: 1rem; font-weight: 700; color: var(--text); }
.explore-card-sub { display: block; font-size: .78rem; font-weight: 400; color: var(--text-muted); margin-top: .15rem; }
.explore-card .prop-tabpanel { padding: 1rem 1.1rem; }

/* ---- Knowledge base (kb.js) ---- */
.kb-h { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 700; margin-bottom: .5rem; }
.kb-lead { color: var(--text-muted); font-size: .95rem; margin-bottom: 1.25rem; }
.kb-topic { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.kb-topic:first-of-type { padding-top: 0; }
.kb-topic h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.kb-topic p { color: var(--text); font-size: .92rem; }
.kb-back { margin-top: 1.5rem; font-size: .9rem; }
.kb-back a { color: var(--accent); }