/* A property's EPC and map (round 9, owner, 21 October 2026): the Energy (EPC) panel, the Map panel, and the
   smaller map card on a case. Colours are the theme's tokens (app.css), so light and dark both work; the A–G
   badge colours are the EPC's own (.epc in app.css). */

.banner.bad { background: var(--bad-soft); color: var(--bad); }

/* ---- Energy (EPC) */
.epc-panel .panel-h { flex-wrap: wrap; }
.epc-panel .panel-h .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.epc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.epc-now, .epc-pot { display: flex; align-items: center; gap: 10px; }
.epc.epc-big { min-width: 48px; height: 40px; font-size: 22px; border-radius: 8px; }
.epc.epc-mid { min-width: 34px; height: 30px; font-size: 16px; border-radius: 6px; }
.epc-arrow { color: var(--muted); font-size: 18px; }
.epc-n { font: 700 16px/1.2 var(--f-display); font-variant-numeric: tabular-nums; }
.epc-l { font-size: 12px; color: var(--muted); }
.epc-valid { margin-left: auto; font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.epc-facts { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); }
.epc-facts dd { text-align: left; font-weight: 500; overflow-wrap: anywhere; }
.epc-sub { font: 600 13px var(--f-display); color: var(--ink-2); margin: 18px 0 6px; }
.epc-feat .ef-k { white-space: nowrap; color: var(--muted); width: 1%; }
.epc-feat .ef-d, .epc-rec-tbl .er-t { overflow-wrap: break-word; }
.epc-rec-tbl .er-c { white-space: nowrap; }
.er-cl { display: none; }
.epc-costs th:first-child, .epc-costs td:first-child { width: 40%; }
.epc-recs { margin-top: 16px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.epc-recs summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.epc-recs .tbl { margin-top: 6px; }
.epc-src { margin: 14px 0 0; overflow-wrap: anywhere; }
.epc-src svg { width: 13px; height: 13px; vertical-align: -2px; }
.epc-none p { margin: 0 0 10px; }
.epc-none .btn svg { width: 15px; height: 15px; vertical-align: -3px; }
.epc-find .epc-num { margin-top: 14px; }
.epc-find .epc-num input { max-width: 340px; font-family: var(--f-mono); }
.epc-pick { max-height: 46vh; overflow: auto; }
.epc-pick label { cursor: pointer; }
.epc-fills { margin: 0 0 12px; padding-left: 18px; }
.epc-notes { margin: 12px 0 0; padding-left: 18px; }
.add-epc { margin-top: 12px; gap: 8px; }
/* Settings, System, Connections: the map's line says what shows without its key. */
.set-conn .help { display: block; }
@media (max-width: 640px) {
  .epc-facts { grid-template-columns: auto minmax(0, 1fr); }
  /* A feature or a recommendation is a two-line row on a phone: its name over its words (or its cost), the rating to the right. */
  .epc-feat, .epc-feat tbody, .epc-rec-tbl, .epc-rec-tbl tbody { display: block; }
  .epc-rec-tbl thead { display: none; }
  .epc-feat tr, .epc-rec-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; border-bottom: 1px solid var(--line-2); padding: 8px 12px; }
  .epc-feat td, .epc-rec-tbl td { display: block; border: 0; padding: 0; width: auto; white-space: normal; }
  .epc-feat .ef-k, .epc-rec-tbl .er-t { grid-column: 1; }
  .epc-feat .ef-k { font-size: 12px; }
  .epc-feat .ef-d, .epc-rec-tbl .er-c { grid-column: 1; }
  .epc-rec-tbl .er-c { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
  .er-cl { display: inline; }
  .epc-feat .ef-r, .epc-rec-tbl .er-a { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .epc-recs summary { padding: 12px 0; line-height: 20px; }
  .epc-none .btn, .map-seg button { min-height: 44px; }
  .epc-valid { margin-left: 0; }
  .epc-panel .panel-h .actions { width: 100%; margin-left: 0; }
  .epc-panel .panel-h .actions .btn { flex: 1 1 auto; min-height: 44px; }
}

/* ---- Map */
.map-panel .panel-h { flex-wrap: wrap; }
.map-panel .map-tabs:empty { display: none; }
.map-panel .panel-h .actions { margin-left: auto; }
.map-frame { position: relative; height: 300px; background: var(--sunk); border-bottom: 1px solid var(--line-2); overflow: hidden; }
.map-small .map-frame { height: 200px; }
.map-iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-wait { display: grid; place-items: center; height: 100%; padding: 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
.map-wait .spinner { vertical-align: -3px; margin-right: 6px; }
.map-approx { margin: 0 0 10px; }
.map-links { display: flex; flex-wrap: wrap; gap: 8px; }
.map-links .btn svg { width: 15px; height: 15px; vertical-align: -3px; }
.map-more { margin-top: 12px; font-size: 13px; }
.map-more ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; }
.map-more a { overflow-wrap: anywhere; }
.map-more svg { width: 12px; height: 12px; vertical-align: -1px; }
@media (max-width: 640px) {
  .map-frame { height: 240px; }
  .map-small .map-frame { height: 180px; }
  .map-links .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
}
@media print { .map-panel { display: none; } }