/* Styles for /assets/evidence.js — the report's evidence sections on a rating card.
 *
 * Every class is prefixed `pcev-`, and that is not tidiness. Three pages render these
 * sections and they do not share a stylesheet: /price-check/ and the project pages carry
 * pricecard.css, /rate-your-property/ carries its own inline <style>, and all three already
 * define .sect-hd, .kv and .rc for themselves. A shared class name here would inherit
 * whichever page it landed on. The declarations below are deliberately identical to their
 * pricecard.css cousins so the sections look the same wherever they are read.
 *
 * The charts are SVG with a viewBox, so the type inside them scales with
 * clientWidth / viewBox width — a font-size in an SVG is not a pixel size, and that has
 * bitten three times (MKT-26). They are drawn at a 680-unit width to be read at ~680px.
 */
.pcev-hd{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--brass-dk);margin:20px 0 6px;padding-top:13px;border-top:1px solid var(--rule)}
.pcev-note{font-size:13px;color:var(--ter);line-height:1.55;margin-top:8px}
.pcev-note b{color:var(--sec)}

/* Two figures side by side, each carrying its own basis caption. */
.pcev-row{display:flex;gap:12px;margin:4px 0 8px;flex-wrap:wrap}
.pcev-cell{flex:1;min-width:150px;background:var(--parch-lt);border:1px solid var(--rule);
  border-radius:6px;padding:9px 12px;text-align:center}
.pcev-k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--brass-dk)}
.pcev-n{font-family:var(--d);font-size:22px;font-weight:700;color:var(--navy);margin:2px 0;
  font-variant-numeric:tabular-nums}
.pcev-w{font-size:13px;color:var(--ter);line-height:1.4}

.pcev-ch{display:block;width:100%;height:auto;margin:6px 0 0}

/* The table scrolls inside its own box on real overflow — the page body never does. */
.pcev-tblwrap{overflow-x:auto;margin-top:6px}
.pcev-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.pcev-tbl th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--ter);text-align:left;padding:5px 14px 5px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.pcev-tbl td{padding:6px 14px 6px 0;border-bottom:1px solid var(--parch-lt);color:var(--sec)}
.pcev-tbl td b{color:var(--navy);font-weight:600}
.pcev-tbl .n{text-align:right;font-variant-numeric:tabular-nums}
/* Only the LAST column loses its right padding. Killing it on every .n column ran the
   distance straight into the project name beside it ("136 mThe Orie"). */
.pcev-tbl th:last-child,.pcev-tbl td:last-child{padding-right:0}

/* Map beside its key on a wide card, stacked on a phone. minmax(0,…) on both tracks and
   never a bare fr: a bare fr is minmax(auto,fr), so one un-breakable register name would
   set the key column's width and squeeze the map — exactly the fault the report had. */
.pcev-mapgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;
  align-items:start;margin-top:6px}
@media (max-width:640px){.pcev-mapgrid{grid-template-columns:1fr}}
.pcev-map figure{margin:0}
.pcev-map .pvmapbox{position:relative;line-height:0;border:1px solid var(--rule);
  border-radius:5px;overflow:hidden}
.pcev-map img{width:100%;height:auto;display:block}
.pcev-map .pvmapbox svg{position:absolute;inset:0;width:100%;height:100%}
.pcev-map figcaption{font-size:12px;color:var(--ter);margin-top:4px;line-height:1.45}

.pcev-key{font-size:13px}
.pcev-key .r{display:flex;align-items:baseline;gap:7px;padding:3px 0;
  border-bottom:1px dotted var(--parch-lt)}
.pcev-key .r i{flex:0 0 16px;height:16px;border-radius:50%;background:var(--navy);color:#fff;
  font-size:9.5px;font-weight:700;line-height:16px;font-style:normal;text-align:center}
.pcev-key .r .t{min-width:0;flex:1}
/* Wrap to a second line, then clamp — a register name cut mid-word reads as a fault. */
.pcev-key .r span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;overflow-wrap:break-word;line-height:1.3;color:var(--sec)}
.pcev-key .r em{display:block;font-style:normal;font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--brass-dk);font-weight:700;margin-top:1px}
.pcev-key .r b{margin-left:auto;color:var(--navy);font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* A font-size inside an SVG is not a pixel size — it scales with clientWidth/viewBox width
   (MKT-26, which has now bitten four times). These charts are drawn at a 680-unit width; on
   a 390px phone the card is ~340px wide, so the scale is 0.5 and the declared 11px rendered
   at 4.8px. CSS beats a presentation attribute, so the declared size is doubled back to a
   readable one at exactly the widths where the scale halves. Measured, not guessed. */
.pcev-ch text.pcev-tk{font-size:13px}
.pcev-ch text.pcev-dl{font-size:15px}
/* The pin letters ride the BASEMAP's viewBox, not the chart's, and that map is drawn at
   about 740 units into a column of ~360px — so the declared size has to be roughly double
   what it should read at. Only the layer WE draw is bumped; the built map's own labels
   belong to the project page and are left exactly as they are there. */
.pcev-map .pinlayer text{font-size:24px}
@media (max-width:640px){
  .pcev-ch text.pcev-tk{font-size:22px}
  .pcev-ch text.pcev-dl{font-size:25px}
}