/* result.css — the valuation view: the lookup form, the estimate card,
   the range plot, the caveats, the adjustments/comparables tables, and the
   HDB/private tab UI (search, browse-by-town, browse-by-district) that
   feeds a lookup. See base.css for shared primitives (tables, attribution,
   loading/error states) and pages.css for the dev/district/KB views this
   result can link out to. */

/* ---- Lookup form ---- */
.prop-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: .75rem; }
.prop-form label { display: flex; flex-direction: column; font-size: .78rem; color: var(--text-muted); gap: .3rem; }
.prop-form input { padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px; font-size: .9rem; background: var(--surface); color: var(--text); }
.prop-form button { padding: .55rem 1.1rem; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }

.prop-namesearch, .prop-locality { display: block; font-size: .85rem;
                                   color: var(--text-muted); margin-bottom: .5rem; }
.prop-namesearch input, .prop-locality input { padding: .5rem .6rem; border: 1px solid var(--border);
                        border-radius: 8px; font-size: .9rem; background: var(--surface); color: var(--text); }
.prop-locality { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem;
                 color: var(--text-muted); margin-top: .75rem; max-width: 20rem; }

.prop-suggest { border: 1px solid var(--border); border-radius: 6px; margin-top: .35rem;
                max-height: 18rem; overflow-y: auto; background: var(--surface); }
.prop-suggest-row { display: block; width: 100%; text-align: left; padding: .5rem .75rem;
                    border: 0; background: none; cursor: pointer; font: inherit; color: var(--text); }
.prop-suggest-row:hover, .prop-suggest-row:focus { background: var(--bg); }
.prop-suggest-more { padding: .5rem .75rem; margin: 0; font-size: .8rem; color: var(--text-muted); }

/* ---- Estimate card ---- */
.prop-addr { font-size: .95rem; margin: 1rem 0 .6rem; }

.prop-estimate { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.25rem; }
/* Confidence is a trust signal, so its colour comes from --amber/--rose
   (never a decorative colour) AND its border WIDTH steps up as confidence
   drops — a colour-blind reader gets the same ranking from the weight of
   the left border as from the badge's own text (HIGH/MEDIUM/LOW). */
.prop-estimate.conf-medium { border-left-color: var(--amber); border-left-width: 4px; }
.prop-estimate.conf-low { border-left-color: var(--rose); border-left-width: 6px; }

/* The page is mostly numbers in columns; the headline number gets the same
   tabular treatment as the tables below it. */
.prop-range { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 700; display: block; font-variant-numeric: tabular-nums; }
.prop-mid { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: .85rem; margin-top: .15rem; }
.prop-estimate small { color: var(--text-muted); font-size: .8rem; }

/* The confidence badge itself: bold, wide-tracked label, with the
   plain-weight "we'd expect..." aside kept visually secondary so the word
   (HIGH/MEDIUM/LOW) is what a reader's eye lands on first. */
.conf-badge { font-weight: 700; letter-spacing: .04em; }
.conf-badge span { font-weight: 400; letter-spacing: 0; color: var(--text-muted); }

/* ---- Caveats ----
   Ranked worst-first by buildCaveats() (caveat-lib.js): declined > warning >
   note. Colour differs (declined/warning use --rose/--amber; note stays
   neutral text) but so does the LEFT BORDER WEIGHT, stepping down with
   severity — the ranking survives for a reader who cannot use colour at
   all, backed by the wording itself ("No estimate: …" vs "Your home is …").
   --amber here is exactly the caveat/confidence use the palette reserves it
   for. */
.cav { border-left: 3px solid var(--border-strong); padding: .5rem .75rem; margin: .5rem 0; }
.cav-warning { border-left-color: var(--amber); border-left-width: 4px; background: #fdf6e8; }
.cav-declined { border-left-color: var(--rose); border-left-width: 6px; background: var(--rose-soft); }
.cav-note { color: var(--text-muted); font-size: .9rem; }
.cav-text { margin: 0; }
.cav-why summary { cursor: pointer; color: var(--text-muted); font-size: .85rem; }

/* property.js renders the adjustment delta as class="pos"/"neg" in the
   adjustments table. Green up, rose down, using the existing variables. */
.pos { color: var(--green); }
.neg { color: var(--rose); }

/* ---- Range plot (chart.js's rangePlot()) ----
   One dimension over price: the range bar/caps in the accent colour, the
   midpoint dot solid, and every comparable a small muted dot beneath. No
   .rp-lab rule — chart.js draws no in-SVG labels (two rounds tried it and
   both produced a misleading or illegible result; see chart.js's own
   comment), so a rule for a class nothing emits would be dead CSS. */
.rp { display: block; max-width: 100%; margin: .5rem 0; }
.rp-bar { stroke: var(--accent); stroke-width: 3; }
.rp-cap { stroke: var(--accent); stroke-width: 2; }
.rp-mid { fill: var(--accent); }
.rp-dot { fill: var(--text-muted); opacity: .55; }

/* ---- HDB / Private explore cards ----
   `.prop-tabs` used to style a <div role="tablist"> wrapping the two buttons.
   That wrapper is gone: the cards are now a disclosure pattern, both closed on
   first paint, which a tablist cannot represent (a tablist always has exactly
   one selected tab). The rule went with it. `.prop-tab` itself stays — it is
   still the hook property.js and its tests select the buttons by. */
.prop-tab { border: 0; background: none; font: inherit; cursor: pointer;
            padding: .55rem .9rem; color: var(--text-muted);
            border-bottom: 2px solid transparent; margin-bottom: -1px; }
.prop-tab:hover { color: var(--text); background: var(--surface-hover); }
.prop-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.prop-tabpanel { padding-top: 1rem; }
.prop-tabpanel[hidden] { display: none; }

/* ---- District browse (private) ---- */
.prop-districts { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
                  gap: .5rem; margin-top: .75rem; }
.prop-district { text-align: left; padding: .6rem .7rem; border: 1px solid var(--border);
                 border-radius: 6px; background: var(--surface); cursor: pointer;
                 font: inherit; color: var(--text); display: grid; gap: .15rem; }
.prop-district:hover { border-color: var(--accent); }
.prop-district small { color: var(--text-muted); font-size: .72rem; }
.prop-browse-head { display: flex; justify-content: space-between; align-items: baseline;
                    gap: 1rem; margin-top: .75rem; }
.prop-district-clear, .prop-pick, .prop-town-clear { border: 0; background: none; padding: 0; font: inherit;
                                   color: var(--accent); cursor: pointer; text-align: left; }

/* ---- Nearby primary schools (HDB result) ---- */
.prop-schools { list-style: none; margin: .5rem 0 0; padding: 0; }
.prop-schools li { display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.prop-schools li span:last-child { color: var(--text-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; }

/* ---- Town browse (HDB) ---- */
.prop-town { text-align: left; padding: .5rem .7rem; border: 1px solid var(--border);
             border-radius: 6px; background: var(--surface); cursor: pointer;
             font: inherit; color: var(--text); }
.prop-town:hover { border-color: var(--accent); }
.prop-street { margin-top: 1rem; }
.prop-street h4 { font-size: .85rem; color: var(--text-muted); font-weight: 600;
                  margin-bottom: .35rem; }
.prop-block { border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
              padding: .35rem .6rem; margin: 0 .35rem .35rem 0; cursor: pointer;
              font: inherit; color: var(--text); }
.prop-block:hover { border-color: var(--accent); }
.prop-block small { color: var(--text-muted); font-size: .72rem; }

.prop-filters { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: .6rem 0 .9rem;
                padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 6px;
                background: var(--surface); }
.prop-filter-group { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.prop-filter-label { font-size: .72rem; color: var(--text-muted); font-weight: 600;
                      text-transform: uppercase; letter-spacing: .03em; }
.prop-filter-opt { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem;
                   color: var(--text); cursor: pointer; }

/* The link from a valuation to its development page. An action, not a
   caveat — it used to wear .section-note and sit below both licence
   attributions, where nobody found it. */
.prop-devlink {
  display: inline-block;
  margin-left: .5rem;
  padding: .15rem .5rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.prop-devlink:hover { background: var(--accent-soft); }