/* The roof panel calculator's map and its notes (tools/roof-panel-
   calculator.html). Results and the rest of the page are in
   roof-panels.css; the boxed question sections are styles.css's
   .tool-input-section, shared with the other calculators. */

.roof-map {
  height: 380px;
  margin-top: 8px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #dfe4ee;
  overflow: hidden;
  /* the map's own layers stay inside it, under the address list */
  isolation: isolate;
}

.roof-map-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.roof-map-button {
  padding: 8px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  cursor: pointer;
}

/* Google's terms: their logo (16-19 px high, clear space round it) and
   the imagery copyright line stay visible on the map, uncovered */
.roof-map-credit {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: calc(100% - 20px);
  margin: 0 10px 5px 10px !important;
  padding-top: 10px;
  background: none !important;
}

.roof-map-credit img {
  flex: none;
  height: 17px;
  width: auto;
}

.roof-map-copyright {
  padding: 1px 4px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: #1f1f1f;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 3px;
}

.roof-map-copyright:empty {
  display: none;
}

.roi-input[aria-invalid='true'] {
  border-color: var(--accent);
}

.page .roi-tool p.roof-limit-note {
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}

.page .roof-faces-note {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.roof-faces-note:empty {
  display: none;
}

/* Hints written as paragraphs read the same as the other hints */
.page .roi-tool p.roi-hint {
  font-size: 11px;
  line-height: 1.5;
}

/* The instructions above the map, and why we ask for the gaps: what the
   visitor needs to read to fill each section in, so body-sized and easy
   to spot. The map's instructions change as the visitor goes (find the
   house, then check the roof), and a new line in them starts a new line. */
.page .roi-tool .roof-gap-why,
.page .roi-tool .roof-map-status {
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}

.page .roi-tool .roof-map-status {
  white-space: pre-line;
}

@media (max-width: 600px) {
  .roof-map {
    height: 320px;
  }
}