/* ------------------------------------------------------------------ */
/* External-assessment processing note (issue #217)                    */
/* ------------------------------------------------------------------ */

/* One note, three shells: the Assessments step (atlas), the booking evidence
   nudge (aci_patient), and the dashboard informant roster (patient). Its markup
   is owned by /static/js/shared/external-assessment-note.js; this file is
   linked by every template that renders it, because none of those shells share
   a stylesheet.

   Palette: the amber "heads up" family established by `.acp-evidence-notice` —
   the issue asks for an icon that *draws the eye*, and the quiet grey/beige
   hint styles nearby (`.pd-doc-external-note`, `.ps-informant-limit-note`) are
   read as skippable fine print, which is exactly what this note must not be.

   The fill is deliberately a step DEEPER than `.acp-evidence-notice`'s #fff8ee,
   and carries a left accent bar. Both were forced by measuring the note in
   place rather than in isolation: at #fff8ee it separated from nothing it
   actually sits on. Against the informant roster's rows (#faf4e8) it differed
   by ~5/255 per channel and read as simply another row; nested inside the
   booking nudge (#fff8ee) it was the parent's exact fill, leaving a bare
   border to do all the work. The accent bar is what survives both, because it
   does not depend on the fill behind it.

   Every custom property carries a literal fallback: `--home-*` is defined in
   the patient shell only, and this note also renders on the atlas pages, which
   do not load it. */
.ext-assess-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  background: #fdf1dc;
  border: 1px solid #efd7a4;
  border-left: 4px solid var(--home-amber, #ad6e0d);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--home-ink-soft, #4b5d57);
}

.ext-assess-note-icon {
  /* Nudged down by 1px so the icon's optical centre lines up with the first
     line of text rather than its ascender. */
  margin-top: 1px;
  flex: none;
  font-size: 15px;
  color: var(--home-amber, #ad6e0d);
}

.ext-assess-note-text {
  min-width: 0;
}

/* Assessments step: the note closes the card, so it needs to clear the last
   row rather than sit flush against it. */
.pd-section-card .ext-assess-note {
  margin-top: 12px;
}