/* ==========================================================================
   Wattlebank Energy — brand override
   app.css supplies every component. Load AFTER app.css.
   ========================================================================== */

:root {
  --brand:      #733a1c;   /* ochre — red earth, and the seventh distinct client */
  --brand-deep: #55290f;
  --brand-tint: #f7ece4;
  --brass:      #3aa8d8;   /* sky */
}

.avatar.brass { background: #ddf0f9; color: #145a76; }

/* --------------------------------------------------------------------------
   Evidence pack — the items that have to exist before certificates can be
   created. Each one is a photo, a signature or a serial number, captured on
   the roof or not at all.
   -------------------------------------------------------------------------- */

.evidence { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }

.evcard {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  background: var(--card);
}

.evcard .e-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.evcard .e-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.4; }
.evcard .e-state { font: 600 12px var(--mono); margin-top: 7px; }

.evcard.have    { border-left-color: var(--good); }
.evcard.have .e-state { color: #0a6b0a; }
.evcard.missing { border-left-color: var(--critical); background: #fff8f8; }
.evcard.missing .e-state { color: #9e2b2b; }
.evcard.weak    { border-left-color: var(--warning); background: #fffdf6; }
.evcard.weak .e-state { color: #8a6008; }

/* --------------------------------------------------------------------------
   Money-at-risk strip — value already discounted against value still to come
   -------------------------------------------------------------------------- */

.riskstrip {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 46px;
  background: var(--critical-bg);
}

.riskstrip .given { background: var(--brand); color: #fff; display: flex; align-items: center; padding: 0 14px; font: 600 13px var(--sans); white-space: nowrap; }
.riskstrip .held  { flex: 1; display: flex; align-items: center; padding: 0 14px; color: #9e2b2b; font: 600 13px var(--sans); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Conversation — the automated SMS exchange that answers and qualifies.
   The work it does here is shaped by the market: a buyer weighing three
   quotes decides which two to stop reading.
   -------------------------------------------------------------------------- */

.convo { display: flex; flex-direction: column; gap: 12px; }

.msg { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; }

.msg .t {
  font: 500 11px var(--mono);
  color: var(--ink-3);
  padding-top: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.msg .b {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 4px 12px 12px 12px;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 62ch;
}

.msg.out .b {
  background: var(--brand-tint);
  border-color: #e4d8cd;
  border-radius: 12px 4px 12px 12px;
}

.msg .who {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.msg.out .who { color: #8a5320; }

/* A captured field, shown the moment the reply supplies it */
.capture {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--good-bg);
  color: #0a6b0a;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 500;
  margin: 6px 6px 0 0;
}

.capture::before { content: "+"; font-weight: 700; }

/* Response-time bands — conversion against how long the customer waited */
.bands { display: flex; flex-direction: column; gap: 7px; }
.band { display: grid; grid-template-columns: 104px 1fr 54px; gap: 11px; align-items: center; font-size: 12.5px; }
.band .bl { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.band .bt { background: var(--line-soft); border-radius: 3px; height: 20px; overflow: hidden; }
.band .bt > div { height: 100%; border-radius: 3px; transition: width .5s ease; }
.band .bv { text-align: right; font: 600 12.5px var(--mono); }