/* shared/portal-client-profile.css
 *
 * WHAT CARMEN KNOWS ABOUT A FAMILY. Built 1 Sep 2026, the reader for a view
 * that had none. See the head of shared/portal-client-profile.js.
 *
 * Almost everything here is layout: the type, the colour, the cards and the
 * buttons come from hibant-ds.css and none of it is restated. */

.cp2 { display: flex; flex-direction: column; gap: var(--sp-4); max-width: var(--portal-measure, 62rem); }

.cp2-back { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-2); }

.cp2-head { display: flex; align-items: center; gap: var(--sp-4); }
.cp2-head__av {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--t2);
  font-size: var(--fs-lead); font-weight: 700;
}
/* THE SELECTOR HAS TO OUTWEIGH `.hds h1`, which is (0,1,1). Written as a bare
   class this is (0,1,0) and the size in it is discarded silently: the heading
   renders at the design system's h1 and nothing anywhere says why. */
.cp2 h1.cp2-head__name { font-size: var(--fs-h2); margin: 0; }
.cp2-head .ds-meta { margin: var(--sp-1) 0 0; }

/* Not confirmed yet. The left edge carries the weight so it still reads when
   colour does not, the same device the admin screens use for a warning. */
.cp2-locked { border-left: 4px solid var(--warn); }
.cp2-locked p:last-child { margin-bottom: 0; }

.cp2-sec + .cp2-sec { margin-top: 0; }

/* A LABEL AND A VALUE, and on a phone the label sits above rather than beside.
   Two columns at 375px gives a label column so narrow that "What a good day
   looks like" wraps to four lines against a one-word answer. */
.cp2-rows { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.cp2-row { display: grid; grid-template-columns: 14rem 1fr; gap: var(--sp-4); align-items: baseline; }
.cp2-row__k { margin: 0; font-size: var(--fs-min); font-weight: 700; color: var(--t2); }
.cp2-row__v { margin: 0; color: var(--t1); }

@media (max-width: 40rem) {
  .cp2-row { grid-template-columns: 1fr; gap: var(--sp-1); }
  .cp2-head__av { width: 44px; height: 44px; font-size: var(--fs-body); }
}