/* THE BOARD PHOTO READER - styles for the "photograph your fuseboard" block.
 *
 * It sits directly UNDER the trip-switch counter inside the EICR row, and its
 * whole visual job is to read as the counter's helper rather than as a rival
 * to it. So: the same white card, a dashed navy edge instead of the counter's
 * solid amber one, and no second amber anywhere. The counter keeps the one
 * amber that row is allowed (the same rule items 37 and 38 set for the
 * commercial toggle), because two amber boxes stacked on a phone screen is
 * how a page stops having a hero.
 *
 * A separate stylesheet, not a block appended to quote.css, so the feature can
 * be lifted out of a tenant site in one line if it is ever switched off.
 */

.board-photo-block {
  margin: 10px 0 0;
  padding: 13px 14px;
  background: #fff;
  border: 2px dashed var(--c-border-2);
  border-radius: var(--r-md);
}

.board-photo-lead {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 800;
  color: var(--c-navy-deep);
  line-height: 1.3;
}

.board-photo-sub {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--c-text-mute);
  line-height: 1.35;
}

/* The button is navy, not amber, and it is a normal-weight action next to the
   counter above it. Full width on a phone: this is a thumb target and a
   half-width button beside white space is a smaller thumb target for no gain. */
.board-photo-choose {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 16px;
  background: var(--c-navy);
  border: 0;
  border-radius: var(--r-sm);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.board-photo-choose:hover { background: var(--c-navy-2); }

.board-photo-choose:focus-visible {
  outline: 3px solid var(--c-amber);
  outline-offset: 2px;
}

.board-photo-choose[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.board-photo-choose svg { flex: 0 0 auto; }

/* The real file input is off-screen rather than display:none, so a keyboard
   and a screen reader can still reach it. The visible button forwards its
   click. display:none would take it out of the accessibility tree entirely. */
.board-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- The one status line, in four states ----
   Colour carries the meaning fast, and the WORDS carry it properly - a
   colour-blind visitor and a screen reader both get the whole message from
   the text, which is why role="status" is on the element in the markup. */
.board-photo-status {
  margin: 10px 0 0;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}

.board-photo-status.is-busy {
  background: var(--c-bg-soft);
  color: var(--c-navy-deep);
}

/* The read that worked. Green, and it is the ONLY green on this row, so it
   cannot be confused with the counter's amber price box above it. */
.board-photo-status.is-done {
  background: var(--c-green-soft);
  color: var(--c-navy-deep);
  border-left: 4px solid var(--c-green);
}

/* A failure is not an error state to be alarmed by - it is a nudge back to
   the counter, which was always there. So it is a soft amber notice, not a
   red one. Nothing has gone wrong for the visitor; they just type a number. */
.board-photo-status.is-failed {
  background: var(--c-amber-soft);
  color: var(--c-navy-deep);
  border-left: 4px solid var(--c-amber);
}

/* While the read is running the dashed edge goes navy, so the block itself
   shows it is working even if the status line has scrolled off a small
   screen. No spinner: a spinner promises a length of time we cannot promise. */
.board-photo-block.is-reading {
  border-color: var(--c-navy);
  border-style: solid;
}

@media (max-width: 560px) {
  .board-photo-block { padding: 12px; }
  .board-photo-lead { font-size: 14.5px; }
}

/* Nobody prints the quote page to look at an upload button. */
@media print {
  .board-photo-block { display: none; }
}