/*
 * The coverage map: one wide search bar over a big map, the way the website
 * does it, and the answer underneath.
 */
.bh-coverage {
  border: var(--bh-border-width) solid var(--bh-colour-border);
  border-radius: var(--bh-radius-md);
  background: var(--bh-colour-surface);
  box-shadow: 0 1px 3px var(--bh-colour-shadow);
  /* The map's square corners stay inside the card's round ones. */
  overflow: hidden;
}

/* A band in the brand's own colour, as on the website, faint enough to sit
   under the box in either theme. */
.bh-coverage-search {
  padding: calc(var(--bh-space-unit) * 4);
  background: color-mix(in srgb, var(--bh-colour-primary) 10%, var(--bh-colour-surface));
  border-bottom: var(--bh-border-width) solid var(--bh-colour-border);
}

/* The box, the glass and the button, drawn as one control. */
.bh-coverage-field {
  position: relative;
  display: flex;
  align-items: center;
  padding: 5px;
  background: var(--bh-colour-surface);
  border: var(--bh-border-width) solid var(--bh-colour-border);
  border-radius: var(--bh-radius-md);
  box-shadow: 0 1px 2px var(--bh-colour-shadow);
}
.bh-coverage-field:focus-within {
  outline: 2px solid var(--bh-colour-primary);
  outline-offset: 1px;
}

.bh-coverage-glass {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0 2px 0 10px;
  color: var(--bh-colour-text-muted);
}

/*
 * Styled here rather than borrowed, because the public shell has no form
 * styling at all — it was built for a marketing page with no inputs on it, so
 * `bh-input` from the console does not exist on this surface and a field using
 * it renders as a raw browser control.
 */
.bh-coverage input[type="search"] {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: calc(var(--bh-space-unit) * 2.5) calc(var(--bh-space-unit) * 2.5);
  border: 0;
  background: transparent;
  color: var(--bh-colour-text);
  font: inherit;
}
/* The control shows focus as a whole, above. */
.bh-coverage input[type="search"]:focus { outline: none }

.bh-coverage .st-btn { flex: none; justify-content: center; white-space: nowrap }

/* On a phone the box gets the whole width and the button goes underneath. */
@media (max-width: 520px) {
  .bh-coverage-search { padding: calc(var(--bh-space-unit) * 3) }
  .bh-coverage-field { flex-wrap: wrap }
  .bh-coverage-field input[type="search"] { flex-basis: calc(100% - 40px) }
  .bh-coverage-field .st-btn { width: 100%; margin-top: 5px }
}

/* Our own suggestions, under the box. Google's draw themselves. */
.bh-coverage-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 1000;   /* over Leaflet's panes, which sit at 400 and up */
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--bh-colour-surface);
  border: var(--bh-border-width) solid var(--bh-colour-border);
  border-radius: var(--bh-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.bh-coverage-suggest li {
  padding: calc(var(--bh-space-unit) * 2.5) calc(var(--bh-space-unit) * 3.5);
  cursor: pointer;
  font-size: var(--bh-size-scale-sm);
  color: var(--bh-colour-text);
}
.bh-coverage-suggest li:hover,
.bh-coverage-suggest li.is-active { background: var(--bh-colour-surface-sunk) }

/* Whose suggestions they are, when they are Google's. Not an option. */
.bh-coverage-suggest li.bh-coverage-credit {
  padding: 4px calc(var(--bh-space-unit) * 3.5) 2px;
  font-size: .72rem;
  color: var(--bh-colour-text-muted);
  text-align: right;
  cursor: default;
}
.bh-coverage-suggest li.bh-coverage-credit:hover { background: none }

/* Leaflet needs a height in pixels — it cannot size itself from its content,
   and a map in a zero-height box is a blank page with no error anywhere. */
#bh-coverage-map {
  height: clamp(380px, 62vh, 640px);
  z-index: 0;   /* keeps Leaflet's panes under the suggestions and any sticky header */
}
@media (max-width: 700px) { #bh-coverage-map { height: 360px } }

/* An author `display` beats the browser's own [hidden] rule, so it is said
   again here — without it the bar showed "Checking at" before any pin. */
.bh-coverage [hidden],
.bh-coverage-after[hidden] { display: none }

.bh-coverage-where {
  display: flex;
  align-items: center;
  gap: calc(var(--bh-space-unit) * 2);
  flex-wrap: wrap;
  padding: calc(var(--bh-space-unit) * 3);
  border-top: var(--bh-border-width) solid var(--bh-colour-border);
  font-size: var(--bh-size-scale-sm);
}
.bh-coverage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bh-colour-primary);
  flex: none;
}
.bh-coverage-at { flex: 1; min-width: 12rem }
.bh-coverage-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--bh-colour-primary);
  text-decoration: underline;
  cursor: pointer;
}

.bh-coverage-status {
  font-size: var(--bh-size-scale-sm);
  color: var(--bh-colour-text-muted);
  min-height: 1.3em;
  margin: calc(var(--bh-space-unit) * 3) 0 0;
}
.bh-coverage-status.is-warn { color: var(--bh-colour-danger) }

.bh-coverage-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: calc(var(--bh-space-unit) * 3);
  margin-top: calc(var(--bh-space-unit) * 2);
}
.bh-coverage-results .bh-coverage-empty,
.bh-coverage-results .bh-coverage-note-block { grid-column: 1 / -1 }

.bh-coverage-after { margin-top: calc(var(--bh-space-unit) * 8); max-width: 40rem }

.bh-coverage-card {
  border: var(--bh-border-width) solid var(--bh-colour-border);
  border-left-width: 4px;
  border-radius: var(--bh-radius-sm);
  padding: calc(var(--bh-space-unit) * 3);
  margin-bottom: calc(var(--bh-space-unit) * 2);
  background: var(--bh-colour-surface);
}

/*
 * A colour per state, and five states rather than two.
 *
 * "Being built" is not a no — it is a callback in six weeks on a street the
 * operator has already paid to trench. "Could not check" is not a no either,
 * and colouring it like one sends a customer with fibre outside their gate to
 * a competitor.
 */
.bh-coverage-card.is-live { border-left-color: var(--bh-colour-success) }
.bh-coverage-card.is-building { border-left-color: var(--bh-colour-warning) }
.bh-coverage-card.is-planned { border-left-color: var(--bh-colour-info) }
.bh-coverage-card.is-none { border-left-color: var(--bh-colour-border) }
.bh-coverage-card.is-unknown { border-left-color: var(--bh-colour-text-muted) }

.bh-coverage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px }
.bh-coverage-badge { font-size: .78rem; color: var(--bh-colour-text-muted) }
.bh-coverage-speed { font-size: var(--bh-size-scale-sm); margin-top: 4px }
.bh-coverage-address { font-size: .8rem; color: var(--bh-colour-text-muted); margin-top: 4px }

.bh-coverage-note {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: var(--bh-radius-sm);
  background: var(--bh-colour-surface-sunk);
  font-size: .8rem;
}

.bh-coverage-note-block {
  margin-top: calc(var(--bh-space-unit) * 3);
  font-size: var(--bh-size-scale-sm);
  color: var(--bh-colour-text-muted);
}

.bh-coverage-order {
  display: inline-block;
  margin-top: calc(var(--bh-space-unit) * 2);
  padding: 8px 14px;
  border-radius: var(--bh-radius-sm);
  background: var(--bh-colour-primary);
  color: var(--bh-colour-on-primary);
  font-size: var(--bh-size-scale-sm);
  font-weight: var(--bh-weight-bold);
  text-decoration: none;
}
.bh-coverage-order:hover { text-decoration: none; opacity: .92 }

/* On the address step the basket's own network leads; another network
   reaching the same pin is a way out, not the way on. */
.bh-coverage-order.is-quiet {
  background: transparent;
  color: var(--bh-colour-primary);
  box-shadow: inset 0 0 0 var(--bh-border-width) var(--bh-colour-border);
}

.bh-coverage-empty { font-size: var(--bh-size-scale-sm); color: var(--bh-colour-text-muted) }

.bh-coverage-unit { display: grid; gap: 4px; margin-top: calc(var(--bh-space-unit) * 2); font-size: var(--bh-size-scale-sm) }
.bh-coverage-unit input {
  padding: calc(var(--bh-space-unit) * 2);
  border: var(--bh-border-width) solid var(--bh-colour-border);
  border-radius: var(--bh-radius-sm);
  background: var(--bh-colour-surface);
  color: var(--bh-colour-text);
  font: inherit;
}

/* In the results grid the gap does the spacing. */
.bh-coverage-results .bh-coverage-card { margin-bottom: 0 }

/* The map's own box inside #bh-coverage-map — Leaflet's or Google's, whichever
   is drawing — so one can replace the other without the other's leftovers. */
.bh-coverage-canvas { height: 100% }

/*
 * The key to the operator's own coverage areas, under the map. Drawn by the
 * script only when there are areas to explain.
 */
.bh-coverage-legend {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  margin: .6rem 0 0;
  font-size: .85rem;
  color: var(--bh-colour-text-muted, #555);
}
.bh-coverage-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.bh-coverage-legend i {
  display: inline-block; width: .85rem; height: .85rem; border-radius: 3px;
  opacity: .75; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}