/* ==========================================================================
   Braemore Dental & Skin — brand override
   app.css supplies every component. Load AFTER app.css.
   ========================================================================== */

:root {
  --brand:      #2f4858;   /* deep slate — the tenth distinct client identity */
  --brand-deep: #223642;
  --brand-tint: #eaf0f3;
  --brass:      #e08b5c;   /* apricot */
}

.avatar.brass { background: #fbe6d9; color: #8a4a20; }

/* --------------------------------------------------------------------------
   Conversation — every outbound message here is a regulated communication,
   so each one carries the approved phrase it was built from.
   -------------------------------------------------------------------------- */

.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: #d6e0e5;
  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: #8a4a20; }

/* The provenance line under an outbound message */
.prov { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

.prov span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 3px;
  padding: 2px 7px;
  font: 500 11px var(--mono);
  border: 1px solid transparent;
}

.prov .ok      { background: var(--good-bg);     color: #0a6b0a; }
.prov .blocked { background: var(--critical-bg); color: #9e2b2b; }
.prov .note    { background: var(--sunken);      color: var(--ink-3); border-color: var(--line); }

/* A captured field, written to the record as 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; }

/* --------------------------------------------------------------------------
   Claim register — one sentence, and every surface it appears on
   -------------------------------------------------------------------------- */

.phrase {
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 11px;
  border-left: 3px solid var(--line);
  background: var(--sunken);
  border-radius: 0 4px 4px 0;
}

.phrase.is-ok       { border-left-color: var(--good); }
.phrase.is-withdrawn{ border-left-color: var(--warning); background: #fffdf6; }
.phrase.is-bad      { border-left-color: var(--critical); background: #fff8f8; }

.surfaces { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.surfaces b {
  font: 500 11px var(--sans);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 7px;
  color: var(--ink-2);
}

/* Response-time bands */
.bands { display: flex; flex-direction: column; gap: 7px; }
.band { display: grid; grid-template-columns: 112px 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); }

/* Pathway steps — the record each stage has to leave behind */
.path { display: flex; flex-direction: column; gap: 0; }
.pstep {
  display: grid;
  grid-template-columns: 132px 1fr 122px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-left: 3px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.pstep:last-child { border-bottom: 0; }
.pstep .pd { font: 500 12px var(--mono); color: var(--ink-2); }
.pstep .pn { font-weight: 500; }
.pstep .pn span { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.pstep .ps { text-align: right; font: 600 12px var(--mono); }

.pstep.done    { border-left-color: var(--good); }
.pstep.done .ps { color: #0a6b0a; }
.pstep.due     { border-left-color: var(--brass); background: #fffaf6; }
.pstep.due .ps { color: #8a4a20; }
.pstep.missing { border-left-color: var(--critical); background: #fff8f8; }
.pstep.missing .ps { color: #9e2b2b; }