/* shared/shared-care-plan.css
 *
 * The care plan as a carer reads it, and as the family is shown it first.
 * Design system tokens only, nothing below --fs-min.
 *
 * ONE STYLESHEET FOR BOTH, for the same reason there is one renderer: the
 * preview IS the consent, and a preview that is laid out differently from the
 * real screen is a different kind of lie from one that shows different fields,
 * but it is still a lie. Anna reads this inside a modal and Carmen reads it on
 * her visit, and the only difference is the box around it.
 *
 * TWO THINGS DRIVE THE LOOK.
 *
 * 1. THE FLAG SECTIONS ARE NOT DECORATION. An allergy and a thing to watch for
 *    carry a left edge and a warmer ground because a carer scans this on a
 *    doorstep in thirty seconds, and the 28 Aug rule is that she sees the
 *    allergy before the meal. Colour is the second signal; the ORDER is the
 *    first one, and that lives in the renderer.
 *
 * 2. NOTHING HERE IS A CONTROL except the two buttons the module draws, which
 *    are .ds-btn and inherit their own target size. The rest is reading.
 */

.scp { display: block; }

.scp-sec {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}

/* TWO CLASSES, NOT ONE. The design system styles bare headings inside .hds and
   `.hds h3` at (0,1,1) beats a single class at (0,1,0), so written as
   `.scp-sec__t` this rule did nothing at all and every section heading rendered
   at display size. That is the fourth cascade collision of this exact shape on
   this project, and portal-plan.css carries the same note. */
.scp .scp-sec__t {
  font-family: var(--font-body);
  font-size: var(--fs-min);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t2);
  margin: 0 0 var(--sp-2);
}

.scp-sec__b { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--t1); }
.scp-sec__b p { margin: 0; }
.scp-sec__b p + p { margin-top: var(--sp-2); }

/* The allergy, and the things that hurt somebody if they are missed. */
.scp-sec--flag {
  background: var(--alert-bg);
  border-left: 4px solid var(--alert);
}

/* The family's own document, first on the page. It was rendered dead last
   until carers were found scrolling straight past it. */
.scp-sec--file {
  background: var(--ok-bg);
  border: 1px solid var(--ok);
}

.scp-part { margin-bottom: var(--sp-3); }
.scp-part:last-child { margin-bottom: 0; }

.scp .scp-part__t {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--t1);
  margin: 0 0 var(--sp-2);
}

.scp-list { margin: 0; padding-left: var(--sp-5); }
.scp-list li { margin-bottom: var(--sp-2); line-height: var(--lh-body); }
.scp-list li:last-child { margin-bottom: 0; }

.scp-quiet { color: var(--t2); font-size: var(--fs-min); }

/* ── The line in the conversation ─────────────────────────────────────────── */
/* It sits inside a chat bubble the chat itself draws, so this styles the inside
   of that bubble and never its ground or its corners. */

.scp-msg__b { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }

/* THREE CLASSES, AND THE ARITHMETIC IS THE REASON. `.hds button:not(.ds-btn)`
   is (0,2,1). Two classes is (0,2,0), which LOSES to it on the element part, so
   the obvious fix would still not have applied: the tap size written here would
   never have reached the button. The card carries .scp itself so this can be
   (0,3,0). Same collision as the headings above, caught by the same guard. */
.scp.scp-msg .scp-msg__go {
  margin-top: var(--sp-2);
  background: var(--t1);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  min-height: var(--tap-min);
  cursor: pointer;
}