/* shared/portal-carer-profile.css
 *
 * GRACE'S OWN PROFILE. Rebuilt 31 Aug 2026.
 *
 * ALMOST EVERYTHING HERE IS LAYOUT, and that is the point. The card, the title,
 * the field, the label, the hint, the input, the textarea and the button all come
 * from hibant-ds.css and none of it is restated. What it replaces drew its own
 * card ELEVEN TIMES by hand, in an inline style, and reached for the old form
 * vocabulary in hibant.css while .ds-field sat unused in the design system.
 *
 * NOTHING HERE NAMES A COLOUR.
 */

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

/* The sentence under a section heading, before its first field. */
.cp-sec__hint { margin-bottom: var(--sp-4); }

/* TWO ACROSS ON A DESKTOP, ONE ON A PHONE, and `minmax(0,1fr)` rather than
   `1fr` because a long placeholder in a grid track that cannot shrink pushes the
   whole column wider than the card. */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--sp-5); }
.cp-grid .ds-field + .ds-field { margin-top: 0; }
.cp-field--wide { grid-column: 1 / -1; }

/* ── HER PHOTOGRAPH ─────────────────────────────────────────────────────── */
.cp-photo { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.cp-photo__img {
  width: 96px; height: 96px;
  border-radius: var(--r-pill);
  object-fit: cover;
  border: 1px solid var(--bd-strong);
  flex: none;
}
.cp-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);
}
.cp-photo__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

/* A FILE INPUT IS AN UNSTYLEABLE BUTTON, so the <label> is the button and the
   input is hidden inside it. `display:none` on the input would take it out of the
   tab order and off the keyboard entirely; clipping keeps it focusable, and the
   label's focus-within ring is what a keyboard user actually sees. */
.cp-file { position: relative; cursor: pointer; }
.cp-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;
}
.cp-file:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }
.cp-status:empty { display: none; }

/* ── LIVE IN ────────────────────────────────────────────────────────────── */
.cp-livein {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--control-bd);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
}
.cp-livein input { width: 24px; height: 24px; flex: none; margin-top: 2px; accent-color: var(--brand); cursor: pointer; }
.cp-livein b { display: block; color: var(--t1); margin-bottom: var(--sp-1); }
.cp-livein .ds-meta { display: block; }

/* ── WHAT SHE DOES ──────────────────────────────────────────────────────── */
.cp-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* A CHIP IS A REAL TAP TARGET. It was 5px 12px of padding around 16px text,
   which is 30px tall against a 48px floor, on a control a carer taps eleven
   times. And its selected state was TWO INLINE STYLES written by JavaScript on
   every tick, which put the palette in a third place. */
.cp-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--control-bd);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--t1);
  font-size: var(--fs-min);
  font-weight: 700;
  cursor: pointer;
}
/* SELECTED IS FILL, INK AND BORDER, never hue alone, and the tick makes it
   readable without colour at all. */
.cp-chip.is-on { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.cp-chip.is-on::before {
  content: "";
  width: 12px; height: 7px;
  margin-right: var(--sp-2);
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}
.cp-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-chip:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ── HER FILM ───────────────────────────────────────────────────────────── */
.cp-video {
  width: 100%;
  max-height: 260px;
  border-radius: var(--r-md);
  background: var(--t1);
  margin-bottom: var(--sp-3);
}
.cp-video[hidden] { display: none; }

.cp-prog { margin-top: var(--sp-3); height: 6px; border-radius: var(--r-pill); background: var(--bd); overflow: hidden; }
.cp-prog[hidden] { display: none; }
.cp-prog__bar { height: 100%; width: 0; background: var(--brand); transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .cp-prog__bar { transition: none; } }

.cp-link { color: var(--brand); font-weight: 700; }

/* The error line reserves nothing until it has something to say. */
.cp .ds-error:empty { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   WHAT FAMILIES CAN SEARCH FOR. Restyled 1 Sep 2026.
   ══════════════════════════════════════════════════════════════════════════

   This block is built in hibant-app.js rather than in the module, because the
   admin carer modal renders the same one and two copies of a matching editor is
   how the two come to offer different things. Both pages load this stylesheet,
   which is why the rules live here.

   IT CARRIED TWENTY FOUR INLINE STYLE ATTRIBUTES on old token names, sitting in
   the middle of a screen that was rebuilt onto the design system on 31 Aug. So
   her profile was clean everywhere except the one part that decides whether
   families can find her at all.

   ── AND THE LANGUAGE PICKER WAS A WALL OF FIFTY TWO CHIPS ─────────────────

   The founder's long list rule exists because of exactly this. It came from the
   directory carrying THIRTY SIX language chips, which he called a wall of
   clickable options. The family's side was fixed and became a native select.
   Her side was never touched, and it was worse than the case that prompted it.

   A NATIVE SELECT IS NOT THE ANSWER HERE, and the rule already says why: she may
   speak several, and multi-select in a native picker is poor on a phone. Rule six
   covers the long tail: quick-tap chips for the common cases plus a search box
   for the rest.

   ALL FIFTY TWO STAY IN THE DOM AND THE SEARCH ONLY CHANGES WHAT IS VISIBLE.
   readCarerMatchFields reads every checkbox inside the wrap, so a language she
   ticked and then filtered out of view is still ticked and still saved. Removing
   options from the DOM to filter them would silently drop them on the next save,
   which on this screen means making a carer invisible to the families who want
   her. */

.cmf {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.cmf__eyebrow {
  font-size: var(--fs-min); font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--t3); margin: 0 0 var(--sp-2);
}
.cmf__lede { font-size: var(--fs-min); color: var(--t2); line-height: 1.7; margin: 0 0 var(--sp-5); }
.cmf-hint  { font-size: var(--fs-min); color: var(--t3); line-height: 1.6; margin: var(--sp-2) 0 0; }
.cmf-hint--lead { margin: 0 0 var(--sp-3); }

/* Two across on a laptop, one on a phone. auto-fit rather than a fixed 1fr 1fr,
   which put two selects side by side at 320px. */
.cmf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

/* ── THE LANGUAGES ────────────────────────────────────────────────────── */

.cmf-search { margin-bottom: var(--sp-3); }
.cmf-langs  { display: flex; flex-wrap: wrap; gap: var(--sp-2); }


/* THE LOOK IS `.cp-chip`, WHICH THIS SCREEN ALREADY HAD, sitting directly above
   this block on her specialisms. I invented a second chip for the languages: a
   pale fill and an inline svg tick. The founder: "the languages in the buttons
   that you can select looks very ugly ... it doesn't look like the other buttons
   we have on the platform." So `cmf-opt` carries the show-and-hide for the
   RENAMED FROM cmf-lang ON 6 SEP 2026, when a second picker of exactly this
   shape arrived for the faiths and cultures a carer has supported. Two lists
   share the behaviour and only one of them is languages, so a class called
   cmf-lang on a background chip was a lie waiting to mislead somebody.
   search and NOTHING ELSE, and the chip is the platform's. */
.cmf-opt { display: none; }
.cmf-opt.is-on,
.cmf-opt.is-common { display: inline-flex; }
.cmf-langs.is-searching .cmf-opt.is-common { display: none; }
.cmf-langs.is-searching .cmf-opt.is-hit,
.cmf-langs.is-searching .cmf-opt.is-on { display: inline-flex; }

.cmf-langs__none { font-size: var(--fs-min); color: var(--t3); line-height: 1.6; }

/* ── FAITH, ARTICLE 9 ─────────────────────────────────────────────────── */

.cmf-faith {
  background: var(--surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
}
.cmf-faith__h { font-size: var(--fs-min); font-weight: 700; color: var(--t1); margin: 0 0 var(--sp-2); }
.cmf-faith__p { font-size: var(--fs-min); color: var(--t2); line-height: 1.7; margin: 0 0 var(--sp-3); }
.cmf-consent {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  cursor: pointer; margin-bottom: var(--sp-3); min-height: var(--tap-min);
}
.cmf-consent input { width: 18px; height: 18px; cursor: pointer; flex: none; margin-top: 2px; accent-color: var(--brand); }
.cmf-consent span { font-size: var(--fs-min); color: var(--t1); line-height: 1.6; }

/* A SEARCH THAT FINDS NOTHING SAYS SO. Hidden until the search runs dry, because
   an empty result that draws nothing at all reads as the box having broken. */
.cmf-langs__miss { display: none; font-size: var(--fs-min); color: var(--t3); line-height: 1.6; margin: 0; }
.cmf-langs.is-searching.is-miss .cmf-langs__miss { display: block; }