/* shared/portal-family-profile.css
 *
 * ANNA'S OWN PROFILE. Rebuilt 31 Aug 2026, the largest screen left on the old
 * build: 577 lines with ONE HUNDRED AND THIRTY-TWO inline style attributes.
 *
 * ALMOST EVERYTHING HERE IS LAYOUT. The card, the title, the field, the label,
 * the hint, the input, the textarea, the button and the chip all come from
 * hibant-ds.css and portal-carer-profile.css, and none of it is restated. The
 * screen it replaces drew NINE cards by hand and reached for .fg / .fl2 / .fi /
 * .fta from the old form vocabulary while .ds-field sat unused.
 *
 * NOTHING HERE NAMES A COLOUR.
 *
 * THE CHIP IS THE CARER'S CHIP. .cp-chip and .is-on come from
 * portal-carer-profile.css, so the care types a family chooses and the care types
 * a carer offers now look like the same thing, because they ARE the same list.
 * The old ones wrote THREE inline styles per click, in a fourth place the palette
 * was being decided.
 */

.fp { display: flex; flex-direction: column; gap: var(--sp-4); max-width: var(--portal-reading, 44rem); }
.fp .ds-card + .ds-card { margin-top: 0; }

.fp-sec__note { font-size: var(--fs-min); font-weight: 400; color: var(--t3); }
.fp-sec > .ds-card__title + p { margin-bottom: var(--sp-4); }

.fp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--sp-5); }
.fp-grid .ds-field + .ds-field { margin-top: 0; }
.fp-field--wide { grid-column: 1 / -1; }
.fp .ds-field + .fp-grid, .fp .fp-grid + .ds-field { margin-top: var(--sp-5); }

/* ── HER PHOTOGRAPH ─────────────────────────────────────────────────────── */
.fp-photo { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.fp-photo__img {
  width: 88px; height: 88px;
  border-radius: var(--r-pill);
  object-fit: cover;
  border: 1px solid var(--bd-strong);
  flex: none;
}
.fp-photo__img--empty {
  display: grid; place-items: center;
  background: var(--surface);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--t2);
}
.fp-photo__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.fp-status:empty { display: none; }

/* A FILE INPUT IS AN UNSTYLEABLE BUTTON, so the label is the button and the input
   is clipped inside it. `display:none` would take it off the keyboard entirely;
   clipping keeps it focusable and focus-within is what a keyboard user sees. */
.fp-file { position: relative; cursor: pointer; }
.fp-file input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fp-file:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ── A TICKBOX OR A RADIO WITH ITS SENTENCE ─────────────────────────────── */
.fp-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: var(--tap-min);
  padding: var(--sp-2) 0;
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--t2);
}
.fp-check input { width: 24px; height: 24px; flex: none; margin-top: 2px; accent-color: var(--brand); cursor: pointer; }
.fp-check:focus-within { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r-sm); }

/* ── MEDICINES ──────────────────────────────────────────────────────────── */
.fp-medlist:not(:empty) { margin: var(--sp-4) 0; }
.fp-medadd {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bd);
}
.fp-dose { display: flex; gap: var(--sp-3); }
.fp-dose #fmed-dose-amount { flex: 0 0 8rem; }
.fp-dose #fmed-dose-unit { flex: 1; }
.fp-times { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ── THE CARE TYPES ─────────────────────────────────────────────────────── */
.fp-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ── AN EXISTING CARE PLAN ──────────────────────────────────────────────── */
.fp-upload { margin-top: var(--sp-4); }
.fp-upload[hidden] { display: none; }
.fp-done { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.fp-done svg { flex: none; color: var(--ok); }

.fp .ds-error:empty { display: none; }

@media (max-width: 560px) {
  .fp-dose { flex-direction: column; }
  .fp-dose #fmed-dose-amount { flex: none; }
}

/* THE UPLOAD STATUS LINE. It painted itself with #C0392B and #5C8A6B, neither of
   which is in the palette, written from JavaScript where no stylesheet could
   find them. A class each way, and both inks are tokens. */
.fp-status.is-good { color: var(--ok); font-weight: 700; }
.fp-status.is-bad  { color: var(--alert); font-weight: 700; }

/* ── ONE MEDICINE, AND THE TIMES BEING TYPED ────────────────────────────────
   Moved out of the CRUD closure in hibant-app.js on 31 Aug 2026, where they were
   the last sixteen inline styles in the branch. */
.fp-time {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap-min);
  padding: 0 var(--sp-2);
  border: 1px solid var(--control-bd);
  border-radius: var(--r-pill);
  background: var(--card);
}
.fp-time input[type="time"] {
  border: 0; background: none; color: var(--t1);
  font-family: inherit; font-size: var(--fs-min); padding: 0;
}
.fp .fp-time .fmed-time-rm {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 0; border-radius: var(--r-pill);
  background: none; color: var(--t3); cursor: pointer;
}
.fp .fp-time .fmed-time-rm:hover { color: var(--alert); }
.fp-time:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }

/* A DASHED EDGE, because it adds a thing rather than doing one.
   .fp .fp-time-add AT (0,2,0): `.hds button:not(.ds-btn)` weighs (0,2,1) because
   :not() contributes its argument, so a bare class loses and the tap floor
   written here would never have applied. Caught by test/design-system.test.js,
   which sweeps every module stylesheet for exactly this. */
.fp .fp-time-add {
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border: 1px dashed var(--control-bd);
  border-radius: var(--r-pill);
  background: none;
  color: var(--brand);
  font-family: inherit;
  font-size: var(--fs-min);
  font-weight: 700;
  cursor: pointer;
}
.fp .fp-time-add:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.fp-med {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--bd);
}
.fp-med:first-child { border-top: 0; }
.fp-med__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.fp-med__name { font-size: var(--fs-body); font-weight: 700; color: var(--t1); margin: 0; }
.fp-med__prn { font-size: var(--fs-min); font-weight: 400; color: var(--t3); }
.fp-med__acts { display: flex; gap: var(--sp-2); flex: none; }
.fp-med .fp-med__rm { color: var(--alert); }
.fp-med p { margin-top: var(--sp-1); }

/* HIBANT PUT THIS ONE IN AND SHE HAS NOT AGREED IT YET. A left rule and words,
   not a coloured panel: it is a question, not an alarm. */
.fp-med__check {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--warn);
  background: var(--surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.fp-med__check p { margin: 0 0 var(--sp-3); }