/* ============================================================
   biodata.css — the helper browser
   Loaded only on the Biodata page, after refine.css.

   This page is where families spend their time, so it is built
   as a tool rather than a brochure: a persistent filter rail on
   desktop, a full-screen sheet on phones, and cards that answer
   the questions people actually ask before they enquire.

   First page to use the new TC palette.
   ============================================================ */

:root {
  --tc-red:    #ff3d3d;   /* accent + active state. Large elements only:
                             white on this is 3.9:1, so text on a red fill
                             is near-black, which clears AA at 5.5:1. */
  --tc-ink:    #1a1a1a;   /* headers, primary buttons, body text */
  --tc-blush:  #ffe4e1;   /* soft panels */
  --tc-deep:   #b22222;   /* red that is safe for small text (5.9:1) */
  --tc-grey:   #e0e0e0;   /* borders, inactive chips */
  --tc-slate:  #4a4d53;
  --tc-white:  #fff;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Page hero ---------- */

.bio-hero {
  padding: 150px 0 44px;
  background: var(--tc-ink);
  color: var(--tc-white);
}
.bio-hero .section-index { color: #ff8f8f; }
.bio-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  max-width: 18ch;
}
.bio-hero p { margin: 0; max-width: 60ch; color: rgba(255,255,255,.88); }

/* ---------- Layout ---------- */

.bio-layout { padding: clamp(30px, 4vw, 52px) 0 clamp(60px, 7vw, 100px); background: var(--tc-white); }
.bio-grid {
  display: grid;
  grid-template-columns: 316px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

/* ---------- Filter rail ---------- */

.bio-filters-inner {
  border: 1px solid var(--tc-grey);
  border-radius: 18px;
  background: var(--tc-white);
  overflow: hidden;
}
@media (min-width: 981px) {
  .bio-filters { position: sticky; top: 104px; }
  .bio-filters-inner { max-height: calc(100vh - 130px); display: flex; flex-direction: column; }
  .bio-facet-list { overflow-y: auto; }
  .bio-filters-close { display: none; }
}

.bio-filters-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--tc-grey);
}
.bio-filters-head h2 {
  margin: 0 0 4px;
  font-size: 1.3rem;
  letter-spacing: -.01em;
}
.bio-filters-head p { margin: 0; color: var(--tc-slate); font-size: var(--fs-small); line-height: 1.45; }
.bio-filters-close {
  margin-left: auto;
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--tc-grey);
  border-radius: 50%;
  background: var(--tc-white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* Search */
.bio-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 22px;
  padding: 0 16px;
  border: 2px solid var(--tc-grey);
  border-radius: 999px;
  background: #f6f6f6;
}
.bio-search:focus-within { border-color: var(--tc-ink); background: var(--tc-white); }
.bio-search svg {
  width: 20px; height: 20px; flex: 0 0 20px;
  fill: none; stroke: var(--tc-slate); stroke-width: 1.8; stroke-linecap: round;
}
.bio-search input {
  flex: 1 1 auto;
  min-height: 50px;
  border: 0;
  background: transparent;
  font-size: var(--fs-small);
  outline: 0;
}

/* Facets */
.bio-facet-list { padding: 0 22px 8px; }
.facet { margin: 0 0 22px; padding: 0; border: 0; }
.facet legend {
  padding: 0;
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tc-ink);
}
.facet-hint { margin: 4px 0 10px; color: var(--tc-slate); font-size: var(--fs-small); line-height: 1.4; }
.facet legend + .facet-options { margin-top: 10px; }
.facet-options { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  min-height: 44px;
  padding: 0 15px;
  border: 1.5px solid var(--tc-grey);
  border-radius: 999px;
  background: var(--tc-white);
  color: var(--tc-ink);
  font: 500 1.02rem/1 "DM Sans", sans-serif;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.chip:hover { border-color: var(--tc-ink); }
/* Active chips carry a red fill with near-black text — the reverse
   (white on red) would fail contrast at this size. */
.chip[aria-checked="true"] {
  border-color: var(--tc-red);
  background: var(--tc-red);
  color: var(--tc-ink);
  font-weight: 700;
}

.bio-filters-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-top: 1px solid var(--tc-grey);
  background: var(--tc-white);
}
.bio-apply {
  flex: 1 1 auto;
  justify-content: center;
  padding: 0 12px;
  font-size: 1rem;
  letter-spacing: .02em;
  white-space: nowrap;
}
.bio-filters-foot .bio-linkbtn { flex: 0 0 auto; white-space: nowrap; }
.bio-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  min-height: 44px;
  color: var(--tc-ink);
  font: 600 var(--fs-small)/1 "DM Sans", sans-serif;
  text-decoration: underline;
  text-underline-offset: .3em;
  cursor: pointer;
}
.bio-linkbtn:hover { color: var(--tc-deep); }

/* ---------- Toolbar ---------- */

.bio-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.bio-filter-open {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 20px;
  border: 2px solid var(--tc-ink);
  border-radius: 999px;
  background: var(--tc-white);
  color: var(--tc-ink);
  font: 700 var(--fs-small)/1 "DM Sans", sans-serif;
  cursor: pointer;
}
.bio-filter-open svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.bio-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px; height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tc-red);
  color: var(--tc-ink);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.bio-count { margin: 0; color: var(--tc-slate); font-size: var(--fs-small); font-weight: 600; }

/* Active filter pills */
.bio-active { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.active-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--tc-red);
  border-radius: 999px;
  background: var(--tc-blush);
  color: var(--tc-ink);
  font: 600 1rem/1 "DM Sans", sans-serif;
  cursor: pointer;
}
.active-pill:hover { background: var(--tc-red); }
.active-pill span[aria-hidden] { font-size: 1.15rem; line-height: 1; }
.active-clear {
  min-height: 40px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--tc-deep);
  font: 700 1rem/1 "DM Sans", sans-serif;
  text-decoration: underline;
  text-underline-offset: .3em;
  cursor: pointer;
}

/* ---------- Cards: the full biodata, laid out for desktop ---------- */

.bio-cards { display: grid; gap: 20px; }

.bio-card {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  border: 1px solid var(--tc-grey);
  border-radius: 18px;
  overflow: hidden;
  background: var(--tc-white);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bio-card:hover { border-color: #b9bcbe; box-shadow: 0 10px 26px rgba(26,26,26,.08); }

.bio-photo {
  display: grid;
  place-content: center;
  gap: 8px;
  min-height: 300px;
  background: var(--tc-blush);
  color: var(--tc-ink);
  text-align: center;
}
.bio-photo > span { font: 700 2.6rem/1 "Manrope", sans-serif; letter-spacing: .04em; }
.bio-photo > small { color: var(--tc-slate); font-size: .95rem; }

/* Black identity bar, per the reference */
.bio-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--tc-ink);
  color: var(--tc-white);
}
.bio-ident h3 {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.bio-ident p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.72);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
/* NEW was the same red as Download Biodata, so the eye read it as a button
   and people tried to click it. Orange says "new arrival" without pretending
   to be a control. */
/* The two flags on the card head speak one language now. They used to
   be a filled orange pill beside a line of bare green text, which read
   as two different components that happened to be neighbours. Both are
   the same pill — same height, same type, same radius — and differ only
   in what they are made of: NEW is solid gold, AVAILABLE is green glass
   with a live dot. Gold is the wizard's own colour, so "new" on the card
   and "try me" on the cover rhyme. */
.bio-new,
.bio-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.bio-new {
  color: #2A1D05;
  background: linear-gradient(180deg, #FFD968 0%, #F2B93C 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 12px rgba(242,185,60,.28);
}
/* Whether a helper is still available is the first thing a family looks
   for. The pill is green glass over the ink head, and the dot in it is
   alive: a ring leaves it every two seconds, the way a live indicator
   does anywhere else on the web, so "available" is read as now and not
   as a label that might be old. */
.bio-status--available {
  color: #5EE39A;
  background: rgba(34,197,94,.14);
  box-shadow: inset 0 0 0 1px rgba(94,227,154,.34), inset 0 1px 0 rgba(255,255,255,.08);
}
.bio-status::before {
  content: "";
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.bio-status--available::before {
  background: #34D274;
  box-shadow: 0 0 0 0 rgba(52,210,116,.55);
  animation: bio-live 2.2s ease-out infinite;
}
@keyframes bio-live {
  0%   { box-shadow: 0 0 0 0 rgba(52,210,116,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(52,210,116,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,210,116,0); }
}
.bio-status--placed {
  color: #C9CBCE;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.bio-status--placed::before { background: #8D9094; }

@media (prefers-reduced-motion: reduce) {
  .bio-status--available::before { animation: none; box-shadow: 0 0 0 3px rgba(52,210,116,.25); }
}

/* Nationality and religion, the two things families ask first, sit on the
   identity line rather than the country code they were reading as a typo. */
.bio-origin {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: normal;
}

/* Numbered sections, two columns on desktop so a full biodata fits
   without a wall of scrolling. */

/* The details column is a column: sections first, actions pinned to the
   foot of it. That is what lets every card in the list end on the same
   line however many chips a helper happens to carry. */
.bio-main { display: flex; flex-direction: column; min-width: 0; }
.bio-body { padding: 22px 24px 24px; flex: 1 1 auto; display: flex; flex-direction: column; }
.bio-sections + .bio-actions { margin-top: 22px; }
.bio-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  align-items: start;
}
.bio-sec:first-child { grid-column: 1 / -1; }
.bio-sec h4 {
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.005em;
}
.bio-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bio-chips li {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
  background: #f1f1f1;
  color: var(--tc-ink);
}
/* Each section gets its own tint so the groups stay distinguishable
   at a glance, the way the reference separates them. */
/* The client's palette. Personal details are blush. The two work
   sections are coloured by category rather than by section (below), so
   the eye can run down Work Preference and Past Work Experience and see
   where they agree. Overseas experience is lilac and household
   compatibility periwinkle, each with its label darkened well past the
   fill so it reads at better than seven to one. */
.bio-chips--prefer li,
.bio-chips--exp li      { background: var(--tc-blush); }
/* ul.bio-chips--… is one step heavier than the ".bio-chips li" rule
   further down that sets every chip's text to slate. Without it the fills
   applied and the darkened labels did not. */
ul.bio-chips--overseas li { background: #F9E2FF; color: #57206B; }
/* Supplied as "F6AEF1", but the swatch it sat on was #DCDEFF, and the
   other five labels match their swatches. The swatch is what was chosen
   by eye, so that is the colour used. */
ul.bio-chips--compat li { background: #DCDEFF; color: #232B7A; }

/* A work category keeps one colour wherever it appears, so the eye can
   run down Work Preference and Past Work Experience and see where they
   agree. Tinting by section instead hid exactly that. */
/* Client's palette. The text is darkened well past the fill in each
   case: these four are pale enough that the label would otherwise sit at
   three or four to one against them. */
.bio-chips li.w-child   { background: #91F6F4; color: #10484C; }
.bio-chips li.w-newborn { background: #FFD6A6; color: #6B3D06; }
.bio-chips li.w-elderly { background: #BBFA46; color: #33511A; }
.bio-chips li.w-house   { background: #FFFE83; color: #5E5206; }
.bio-chips li.w-bedridden { background: #FFDCE8; color: #6B1F45; }  /* new on the 2026 form */
.bio-nil { margin: 0; color: var(--tc-slate); font-size: var(--fs-small); }

/* The three actions sit on one row and pin to the bottom of the details
   column, so every card in the list ends on the same line however many
   chips a helper has. */
.bio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--tc-grey);
}
/* Three equal pills across the full width of the card, each with its
   label centred. They used to hug the left with a run of empty card to
   their right, and the pills were sized by their words, so the row read
   as three different-sized objects rather than as one control. */
.bio-actions .bio-btn {
  flex: 1 1 0;
  justify-content: center;
  text-align: center;
  min-width: 0;
  padding: 6px 12px;
  min-height: 48px;
  white-space: normal;   /* "Enquire on WhatsApp" takes two lines rather than clipping */
  line-height: 1.15;
  font-size: .92rem;
}
.bio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 20px;
  border: 2px solid transparent;
  border-radius: 8px;
  font: 700 var(--fs-small)/1.2 "DM Sans", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.bio-btn--dark { background: var(--tc-ink); color: var(--tc-white); }
.bio-btn--dark:hover { background: #000; }
.bio-btn--accent { background: var(--tc-red); color: var(--tc-ink); }
.bio-btn--accent:hover { background: #ff6262; }
/* Every button that opens WhatsApp wears WhatsApp's own green, so a family
   knows before tapping where it will take them. Dark label: white on
   #25D366 is under 2:1 and fails; #0B2B16 on it is 7.7:1. Matches the
   Open WhatsApp button in the request sheet. */
.bio-btn.bio-btn--wa { background: #25D366; color: #0B2B16; border-color: transparent; }
.bio-btn.bio-btn--wa:hover,
.bio-btn.bio-btn--wa:focus-visible { background: #1EBE5A; color: #0B2B16; }

.bio-empty {
  padding: 44px 24px;
  border: 1px dashed var(--tc-grey);
  border-radius: 18px;
  text-align: center;
  color: var(--tc-slate);
}
.bio-disclaimer { margin: 26px 0 0; color: var(--tc-slate); font-size: var(--fs-small); }

/* ---------- Toast ---------- */

.bio-toast[hidden], .bio-active[hidden] { display: none; }
.bio-toast {
  position: fixed;
  left: 50%; bottom: 26px;
  z-index: 210;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 460px);
  margin: 0;
  padding: 15px 18px;
  border-radius: 12px;
  background: var(--tc-ink);
  color: var(--tc-white);
  font-size: var(--fs-small);
  line-height: 1.5;
  box-shadow: 0 12px 30px rgba(0,0,0,.26);
}

/* ---------- Tablet ---------- */

@media (max-width: 1180px) {
  .bio-card { grid-template-columns: 200px minmax(0, 1fr); }
  .bio-sections { grid-template-columns: 1fr; }
}

/* ---------- Filter sheet on phones and small tablets ---------- */

@media (max-width: 980px) {
  .bio-grid { grid-template-columns: 1fr; }
  .bio-filter-open { display: inline-flex; }

  .bio-filters {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: none;
    padding: 0;
    background: rgba(26,26,26,.5);
  }
  .bio-filters.is-open { display: block; }
  .bio-filters-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
  }
  .bio-facet-list { flex: 1 1 auto; overflow-y: auto; padding-bottom: 20px; }
  .bio-filters-foot { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ---------- Phones ---------- */

@media (max-width: 760px) {
  .bio-hero { padding: 120px 0 34px; }
  .bio-card { grid-template-columns: 1fr; }
  .bio-photo { min-height: 220px; }
  .bio-photo > span { font-size: 2.1rem; }
  .bio-bar { padding: 14px 18px; }
  .bio-ident h3 { font-size: 1.18rem; }
  .bio-body { padding: 18px; }
  .bio-sections { grid-template-columns: 1fr; gap: 16px; }

  .bio-modal { padding: 0; }
  .bio-modal-card { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .detail-photo { height: 160px; }
  /* Room for the sticky Call / WhatsApp bar. */
  .bio-toast { bottom: 96px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .bio-card, .bio-btn, .chip { transition: none; }
  .bio-card:hover { box-shadow: none; }
  .bio-modal { backdrop-filter: none; }
}

/* ---------- Portrait slots ----------
   The initials block is the default. Adding `photo:` to a candidate
   swaps in a real portrait at the same footprint, so consented
   photographs drop in later with no layout change. */
.bio-photo--has-photo,
.detail-photo--has-photo { padding: 0; background: var(--tc-grey); }
.bio-photo--has-photo img,
.detail-photo--has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* portraits sit head-high in frame */
  display: block;
}
.bio-photo--has-photo { min-height: 240px; }
.detail-photo--has-photo { height: 260px; }

/* ============================================================
   Density pass
   The 17px floor from accessible.css is right for prose and
   wrong for a dense data card: at that size, with everything
   semibold, nothing recedes and the page reads as noise.
   Body copy and the action buttons keep the larger size; the
   chips and labels — which are scanned, not read — step down and
   lose the weight. Bold is reserved for the name and the section
   headings, which is what hierarchy is for.
   ============================================================ */

/* --- filter rail --- */
.bio-filters-head h2 { font-size: 1.22rem; }
.bio-filters-head p { font-size: 1rem; }
.facet { margin-bottom: 20px; }
.facet legend { font-size: .9rem; letter-spacing: .07em; color: var(--tc-slate); }
.facet-hint { font-size: .98rem; margin-bottom: 9px; }
.facet-options { gap: 7px; }
.chip {
  min-height: 42px;
  padding: 0 14px;
  font-size: .98rem;
  font-weight: 400;
  line-height: 1.25;
}
.chip[aria-checked="true"] { font-weight: 600; }
.bio-search input { font-size: 1rem; min-height: 46px; }

/* --- card --- */
.bio-photo { min-height: 260px; }
.bio-ident h3 { font-size: 1.2rem; letter-spacing: .015em; }
.bio-ident p { font-size: .98rem; font-weight: 400; }

.bio-body { padding: 20px 22px 22px; }
.bio-sections { gap: 16px 26px; }
.bio-sec h4 {
  margin-bottom: 8px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tc-ink);
}
.bio-chips { gap: 6px; }
.bio-chips li {
  padding: 6px 12px;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--tc-slate);
}
/* Personal Details sits at the top of the card and had the one grey in
   a run of tinted groups, which read as "not styled yet" rather than as
   its own section. Blush, like everything else on this page. */
.bio-chips--plain li { background: #FFEEEC; color: var(--tc-ink); }
.bio-nil { font-size: .95rem; }

/* Actions keep their size — they are the point of the page. */
.bio-actions { margin-top: 20px; padding-top: 18px; }
.bio-btn { min-height: 50px; font-size: 1rem; letter-spacing: .03em; }

.bio-count { font-size: 1rem; font-weight: 400; }
.bio-disclaimer { font-size: .98rem; }
.active-pill { font-size: .96rem; font-weight: 500; }

/* Chips stay at the 44px touch minimum even though the type came down. */
.chip { min-height: 44px; }
/* The buttons hug their labels rather than stretching across the card,
   which is how the approved layout draws them.

   Wherever the sidebar sits beside the card the details column is about
   536px, which is 24px short of the three labels at full size, and the
   shell caps it so a wider window does not help. The labels come down a
   step for the whole of that range rather than wrapping onto a second
   line. Below 981px the grid is a single column, the column is wide, and
   they fit as they are. */
@media (min-width: 981px) {
  .bio-actions { gap: 8px; }
  .bio-actions .bio-btn {
    padding: 6px 12px;
    font-size: .84rem;
    letter-spacing: .02em;
  }
}
@media (max-width: 760px) {
  /* Three across is too tight for a phone; stacked, each takes the full
     width, which is also the biggest target for a thumb. */
  .bio-actions { flex-wrap: wrap; }
  .bio-actions .bio-btn { flex: 1 1 100%; }
}

/* ---------- Portrait frame ----------
   Candidate photographs are 3:4 portraits shot against a plain
   wall. The slot is held at that ratio whether or not a photo is
   present, so the grid never reflows when real, consented images
   are dropped in — and the placeholder shows the true crop rather
   than a shape nothing will ever fit. */
/* The photograph fills the height of the details beside it. Held at a
   fixed 3:4 box it left a gap under Overseas Experience on any record with
   fewer chips than its neighbours, which read as a broken card. */
.bio-photo {
  position: relative;
  min-height: 0;
  height: 100%;
  align-content: center;
  overflow: hidden;
}
.bio-photo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: 74px; height: 74px;
  margin-left: -37px;
  border-radius: 50%;
  background: rgba(26,26,26,.07);
}
.bio-photo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(34% + 62px);
  width: 128px; height: 84px;
  margin-left: -64px;
  border-radius: 64px 64px 0 0;
  background: rgba(26,26,26,.07);
}
.bio-photo > span,
.bio-photo > small { position: relative; z-index: 1; }
.bio-photo > span { font-size: 2rem; }
.bio-photo > small { display: block; margin-top: 76px; }
/* A real portrait replaces the whole placeholder. */
.bio-photo--has-photo::before,
.bio-photo--has-photo::after { content: none; }
.bio-photo--has-photo { padding: 0; display: block; }

/* ---------- Photograph gallery ----------
   One photograph and this is a single image filling the column. Several,
   and the same track becomes a slider: thumbnails under it on a desktop,
   a swipe with dots on a phone, where four thumbnails would be four
   targets in the width of one. */
.bio-shots {
  display: flex;
  height: 100%;
  min-height: 260px;
  transform: translateX(calc(var(--shot, 0) * -100%));
  transition: transform .28s ease;
}
.bio-shots img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.bio-photo--has-photo { display: flex; flex-direction: column; }
.bio-photo--has-photo .bio-shots { flex: 1 1 auto; }

.bio-thumbs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 9px;
  background: #fff;
}
.bio-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(255,255,255,.6);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  min-height: 0;
}
.bio-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.bio-thumb.is-on { border-color: var(--tc-crimson, #8B0909); }
/* A slot with no photograph in it yet. Named rather than blank so it reads
   as "more to come" instead of as something that failed to load. */
.bio-thumb--empty {
  display: grid;
  place-items: center;
  background: rgba(26,26,26,.06);
  color: rgba(26,26,26,.38);
  font: 700 .56rem/1.25 "DM Sans", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  padding: 2px;
}
.bio-thumb:focus-visible { outline: 2px solid var(--tc-crimson, #8B0909); outline-offset: 2px; }

.bio-dots { display: none; }
.bio-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(26,26,26,.28);
  transition: background .2s ease;
}
.bio-dot.is-on { background: var(--tc-crimson, #8B0909); }

@media (max-width: 760px) {
  /* The picture itself swipes; the transform that drives the desktop
     slider has to be off or the scroller starts halfway through nothing. */
  .bio-shots {
    transform: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .bio-shots::-webkit-scrollbar { display: none; }
  .bio-shots img { scroll-snap-align: center; }
  /* The strip stays on a phone. Without it the only way to reach the other
     photographs was to swipe a picture that gave no sign it could be
     swiped, and the dots underneath were an indicator, not a control. The
     card is full width here, so the four thumbnails come out larger than
     they are on a desktop. */
  .bio-thumbs { display: grid; }
  .bio-dots { display: none; }
}

@media (max-width: 760px) {
  .bio-photo { height: auto; aspect-ratio: 4 / 3; }
  /* The 3:4 belongs to the picture, not to the picture plus the strip of
     thumbnails under it. Set on the column, the strip ate a hundred
     pixels of the height and left the picture nearly square, so a 3:4
     portrait was cropped top and bottom by object-fit — and these are
     passport photographs with the head hard against the top edge, so
     what it cropped was the top of her head. Set on the picture itself,
     a 3:4 photograph in a 3:4 box is not cropped at all. */
  .bio-photo--has-photo { aspect-ratio: auto; }
  .bio-photo--has-photo .bio-shots-wrap { aspect-ratio: 3 / 4; flex: 0 0 auto; }
  .bio-photo--has-photo .bio-shots { height: 100%; min-height: 0; }
  /* Whatever is not 3:4 keeps its head: the crop is taken off the foot. */
  .bio-shots img { object-position: 50% 12%; }
  .bio-photo::after { top: calc(34% + 54px); }
}
/* The name is already in the bar above, so the placeholder shows the
   silhouette and its status rather than repeating initials over it. */
.bio-photo:not(.bio-photo--has-photo) span { display: none; }
.bio-photo small { margin-top: 96px; color: var(--tc-slate); }

/* ------------------------------------------------------------
   WhatsApp request sheet (interview video)
   ------------------------------------------------------------ */
.wa-sheet{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:16px}
.wa-sheet[hidden]{display:none}
.wa-sheet-backdrop{position:absolute;inset:0;background:rgba(26,26,26,.55)}
.wa-sheet-panel{position:relative;width:min(560px,100%);background:#fff;border-radius:18px;
  padding:32px 32px 28px;box-shadow:0 30px 60px rgba(26,26,26,.25);animation:wa-in .28s ease-out}
@keyframes wa-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wa-sheet-panel{animation:none}}
.wa-sheet-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:transparent;
  font-size:1.8rem;line-height:1;color:var(--tc-ink,#1A1A1A);border-radius:50%;cursor:pointer}
.wa-sheet-x:hover,.wa-sheet-x:focus-visible{background:var(--tc-blush,#FFE4E1)}
.wa-sheet-eyebrow{margin:0 0 6px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tc-deep,#B22222);font-weight:600}
.wa-sheet-title{margin:0 0 18px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:1.7rem;line-height:1.15;color:var(--tc-ink,#1A1A1A);max-width:20ch}
.wa-chat{background:#efeae2;border-radius:14px;padding:14px 14px 16px;
  background-image:radial-gradient(rgba(26,26,26,.05) 1px,transparent 1px);background-size:14px 14px}
.wa-chat-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:.92rem;line-height:1.25}
.wa-chat-head strong{display:block;color:var(--tc-ink,#1A1A1A)}
.wa-chat-head small{display:block;color:#5b5b5b;font-size:.82rem}
.wa-chat-avatar{width:38px;height:38px;border-radius:50%;background:var(--tc-red,#FF3D3D);color:var(--tc-ink,#1A1A1A);
  display:grid;place-items:center;font-weight:700;font-size:.85rem;letter-spacing:.04em}
.wa-bubble{margin:0 0 0 auto;max-width:92%;background:#dcf8c6;color:#1A1A1A;border-radius:12px 2px 12px 12px;
  padding:12px 14px;font-size:1rem;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wa-sheet-note{margin:16px 0 0;font-size:.92rem;line-height:1.5;color:#4a4a4a}
.wa-sheet-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.wa-sheet-actions .button{min-height:48px;flex:1 1 200px}
.wa-sheet-actions .wa-open{background:#25D366;color:#1A1A1A}
.wa-sheet-actions .wa-open:hover,.wa-sheet-actions .wa-open:focus-visible{background:#1fb457;color:#1A1A1A}
.wa-sheet-actions .wa-copy{background:#fff;color:var(--tc-ink,#1A1A1A);box-shadow:inset 0 0 0 2px var(--tc-grey,#E0E0E0)}
.wa-sheet-actions .wa-copy:hover,.wa-sheet-actions .wa-copy:focus-visible{background:var(--tc-blush,#FFE4E1)}
@media (max-width:600px){
  .wa-sheet{padding:0;align-items:end}
  .wa-sheet-panel{border-radius:18px 18px 0 0;padding:28px 20px 24px;width:100%}
  .wa-sheet-actions .button{flex:1 1 100%}
}


/* ---------- Nationality and religion tabs ----------
   Above everything, full width, because this is the first cut a family
   makes and it applies to the sidebar as much as to the results. The
   choices are mutually exclusive, so tabs rather than facets. The religion
   facet came out of the sidebar when these went in: with both, someone
   could pick "Filipino Christian" here and "Muslim" in the panel and get
   an empty page with no clue why. */
.bio-picker { padding-top: 4px; }
/* The bar runs the full width of the results column beneath it, and the
   five choices share it equally. Hugging its content left the bar a short
   white lozenge floating over a page-wide grid, and the eye had nothing
   to line it up against. */
.bio-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  width: 100%;
  margin: 0 0 12px;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(26,26,26,.07);
}
.bio-tab {
  display: inline-flex;
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(26,26,26,.78);
  font: 600 .94rem/1 "DM Sans", sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.bio-tab:hover:not(:disabled):not(.is-on) { background: rgba(26,26,26,.06); color: var(--tc-ink); }
.bio-tab.is-on { background: var(--tc-ink); color: #fff; }
.bio-tab:disabled { opacity: .38; cursor: not-allowed; }
.bio-tab-count {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(26,26,26,.08);
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bio-tab.is-on .bio-tab-count { background: rgba(255,255,255,.2); color: #fff; }
.bio-tabline { margin: 0 0 18px; color: rgba(26,26,26,.7); font-size: var(--fs-small); }

/* The group toggle is the third pill now, not a checkbox. Pressed, it
   reads as chosen rather than as another thing to click. */
.bio-btn--pick {
  border-color: rgba(26,26,26,.28);
  background: transparent;
  color: var(--tc-ink);
}
.bio-btn--pick:hover { border-color: var(--tc-ink); background: rgba(26,26,26,.05); }
.bio-btn--pick[aria-pressed="true"] {
  border-color: var(--tc-crimson, #8B0909);
  background: var(--tc-crimson, #8B0909);
  color: #fff;
}

@media (max-width: 760px) {
  /* Side by side these two squeeze the name; stacked at the right they
     read as one block of status. */
  .bio-flags { flex-direction: column; align-items: flex-end; gap: 6px; }
  /* On a phone these were a sideways scroller: the last two choices sat off
     the edge of the screen, so a family could not see that Filipino Muslim
     was an option at all without discovering they could swipe a row of
     buttons. Every choice is now on screen at once, two to a row, with
     "All helpers" across the top as the way back. The label wraps inside
     its own pill rather than the row scrolling. */
  .bio-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    overflow: visible;
  }
  .bio-tab {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    min-height: 52px;
    padding: 8px 8px;
    font-size: .8rem;
    line-height: 1.2;
    text-align: center;
  }
  /* Laid out as a grid rather than a segmented bar, each choice needs its
     own edge or they read as loose text on a white card. */
  .bio-tab {
    border: 1px solid rgba(26,26,26,.16);
    background: rgba(26,26,26,.03);
  }
  .bio-tab.is-on { border-color: var(--tc-ink); }
  /* Indonesia down the left, the Philippines down the right, so the two
     nationalities read as two columns rather than four loose buttons. The
     source order stays nationality-then-religion, which is the order the
     tabs are announced in, so the placement is set here rather than by
     reordering the markup. */
  .bio-tab:nth-child(1) { grid-column: 1 / -1; grid-row: 1; min-height: 46px; }
  .bio-tab:nth-child(2) { grid-column: 1; grid-row: 2; }
  .bio-tab:nth-child(3) { grid-column: 1; grid-row: 3; }
  .bio-tab:nth-child(4) { grid-column: 2; grid-row: 2; }
  .bio-tab:nth-child(5) { grid-column: 2; grid-row: 3; }
  .bio-tab-count { min-width: 18px; padding: 1px 5px; font-size: .72rem; }
}


/* ------------------------------------------------------------
   MORE DETAILS AND COMPARE SHEETS

   Same shell as the WhatsApp sheet — centred panel on a desktop, a sheet
   rising from the bottom edge on a phone — but these two carry a lot more
   inside, so the panel scrolls and the compare one is allowed to be wide.
   ------------------------------------------------------------ */
.tc-sheet{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:16px}
.tc-sheet[hidden]{display:none}
.tc-sheet-backdrop{position:absolute;inset:0;background:rgba(26,26,26,.55)}
.tc-sheet-panel{position:relative;width:min(600px,100%);max-height:min(88vh,900px);overflow:auto;
  -webkit-overflow-scrolling:touch;background:#fff;border-radius:18px;padding:32px 32px 28px;
  box-shadow:0 30px 60px rgba(26,26,26,.25);animation:wa-in .28s ease-out}
.tc-sheet--compare .tc-sheet-panel{width:min(1100px,100%)}
@media (prefers-reduced-motion:reduce){.tc-sheet-panel{animation:none}}
.tc-sheet-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:transparent;
  font-size:1.8rem;line-height:1;color:var(--tc-ink,#1A1A1A);border-radius:50%;cursor:pointer;z-index:2}
.tc-sheet-x:hover,.tc-sheet-x:focus-visible{background:var(--tc-blush,#FFE4E1)}
.tc-sheet-eyebrow{margin:0 0 6px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tc-deep,#B22222);font-weight:600}
.tc-sheet-title{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  font-size:1.9rem;line-height:1.1;color:var(--tc-ink,#1A1A1A);padding-right:44px}
.tc-sheet-sub{margin:4px 0 20px;font-size:.92rem;color:#5b5b5b}

/* ---- the gate ---- */
.detail-gate-lead{margin:0 0 18px;font-size:1rem;line-height:1.55;color:#3a3a3a}
.detail-field{display:block;margin-bottom:14px}
.detail-field>span{display:block;margin-bottom:6px;font-size:.88rem;font-weight:600;color:var(--tc-ink,#1A1A1A)}
.detail-field>span em{font-style:normal;font-weight:400;color:#777}
.detail-field input{width:100%;min-height:50px;padding:0 14px;font:inherit;font-size:1rem;
  color:var(--tc-ink,#1A1A1A);background:#fff;border:0;border-radius:10px;
  box-shadow:inset 0 0 0 2px var(--tc-grey,#E0E0E0)}
.detail-field input:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--tc-crimson,#8B0909)}
.detail-gate-error{margin:0 0 12px;font-size:.92rem;color:var(--tc-crimson,#8B0909);font-weight:600}
.detail-gate-error[hidden]{display:none}
.detail-gate-go{width:100%;margin-top:4px}
.detail-gate-note{margin:14px 0 0;font-size:.84rem;line-height:1.5;color:#6a6a6a}

/* ---- the unlocked sheet ---- */
/* Four fixed tracks, not auto-fit: a helper with one photograph would
   otherwise get a portrait the height of the whole sheet, and the reader
   has to scroll past it to reach a single fact. */
.detail-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:22px}
.detail-shots img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;border-radius:10px;display:block}
.detail-grid{margin:0 0 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2px 18px}
.detail-row{padding:9px 0;border-bottom:1px solid var(--tc-grey,#E0E0E0)}
.detail-row dt{margin:0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#7a7a7a}
.detail-row dd{margin:3px 0 0;font-size:1rem;color:var(--tc-ink,#1A1A1A)}
.detail-sec{margin-bottom:18px}
.detail-sec h4{margin:0 0 8px;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tc-ink,#1A1A1A)}
.detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.detail-actions .bio-btn{flex:1 1 220px}

/* ---- compare ---- */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--tc-grey,#E0E0E0);border-radius:12px}
.cmp-scroll:focus-visible{outline:2px solid var(--tc-crimson,#8B0909);outline-offset:2px}
.cmp-table{border-collapse:separate;border-spacing:0;width:100%;font-size:.94rem;line-height:1.45}
.cmp-table th,.cmp-table td{padding:11px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--tc-grey,#E0E0E0)}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
/* The field column stays put: on a phone three helpers are wider than the
   screen, and a row scrolled away from its own label is meaningless. */
.cmp-table th[scope="row"],.cmp-corner{position:sticky;left:0;z-index:1;background:#fff;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#6a6a6a;font-weight:600;
  width:190px;min-width:150px;box-shadow:1px 0 0 var(--tc-grey,#E0E0E0)}
.cmp-table thead th{position:sticky;top:0;z-index:2;background:var(--tc-blush,#FFE4E1);
  text-align:center;min-width:170px}
.cmp-corner{top:0;z-index:3;background:var(--tc-blush,#FFE4E1);border-bottom:1px solid var(--tc-grey,#E0E0E0)}
.cmp-table thead img,.cmp-initials{display:block;margin:0 auto 7px;width:60px;height:60px;border-radius:50%;
  object-fit:cover;object-position:50% 18%}
.cmp-initials{display:grid;place-items:center;background:var(--tc-ink,#1A1A1A);color:#fff;
  font-size:1rem;font-weight:700;letter-spacing:.04em}
.cmp-name{display:block;font-size:.96rem;font-weight:700;color:var(--tc-ink,#1A1A1A);text-transform:none;letter-spacing:0}
.cmp-nil{color:#9a9a9a}
.cmp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.cmp-actions .bio-btn{flex:1 1 220px}

/* A third pill on the tray, and the outline treatment the shortlist
   button already uses, so the two read as the same kind of control. */
.bio-btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.bio-btn--ghost:hover:not(:disabled){background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px #fff}
.bio-btn--ghost:disabled{opacity:.42;cursor:not-allowed}
.cmp-actions .bio-btn--ghost,.detail-actions .bio-btn--ghost{color:var(--tc-ink,#1A1A1A);
  box-shadow:inset 0 0 0 2px var(--tc-grey,#E0E0E0)}
.cmp-actions .bio-btn--ghost:hover{background:var(--tc-blush,#FFE4E1);box-shadow:inset 0 0 0 2px var(--tc-ink,#1A1A1A)}

@media (max-width:600px){
  .tc-sheet{padding:0;align-items:end}
  .tc-sheet-panel,.tc-sheet--compare .tc-sheet-panel{border-radius:18px 18px 0 0;padding:28px 18px 24px;
    width:100%;max-height:92vh}
  .tc-sheet-title{font-size:1.55rem}
  .detail-actions .bio-btn,.cmp-actions .bio-btn{flex:1 1 100%}
  .cmp-table thead th{min-width:150px}
  .cmp-table th[scope="row"],.cmp-corner{width:124px;min-width:124px}
  .cmp-hint{display:block}
  .cmp-table th,.cmp-table td{padding:9px 11px;font-size:.88rem}
}

.cmp-hint{display:none;margin:10px 0 0;font-size:.84rem;color:#7a7a7a}

/* Three actions plus Clear will not sit on one phone row: "Send request on
   WhatsApp" wrapped onto two lines inside its own pill. Compare and Clear
   share the top row — both are small, incidental controls — and the send
   button, which is the one people are heading for, gets a full-width row
   of its own underneath. The selectors are deliberately one level deeper
   than the layout rules in editorial.css so they win wherever the
   stylesheets end up in the order. */
@media (max-width: 760px) {
  .bio-tray .bio-tray-actions { flex-wrap: wrap; row-gap: 10px; }
  .bio-tray .bio-tray-actions .bio-btn[data-tray-compare] { flex: 1 1 auto; order: 1; }
  .bio-tray .bio-tray-actions .bio-tray-clear { order: 2; flex: 0 0 auto; }
  .bio-tray .bio-tray-actions .bio-btn[data-tray-send] { order: 3; flex: 1 1 100%; white-space: nowrap; }
}

/* ---- compare: keep-tick and per-helper actions ---- */
.cmp-keep{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:9px;
  font-size:.8rem;font-weight:400;letter-spacing:0;text-transform:none;color:#5b5b5b;cursor:pointer}
.cmp-keep input{width:19px;height:19px;accent-color:var(--tc-crimson,#8B0909);cursor:pointer;flex:0 0 auto}
.cmp-table tfoot th,.cmp-table tfoot td{border-top:1px solid var(--tc-grey,#E0E0E0);border-bottom:0;
  padding-top:14px;padding-bottom:16px;vertical-align:top}
.cmp-table tfoot th[scope="row"]{background:#fff}
.bio-btn.cmp-act{display:flex;width:100%;min-height:42px;padding:0 12px;margin-bottom:8px;
  font-size:.76rem;letter-spacing:.05em}
.bio-btn.cmp-act:last-child{margin-bottom:0}
.cmp-empty{margin:0;padding:26px 20px;text-align:center;font-size:1rem;line-height:1.55;color:#5b5b5b}


/* ------------------------------------------------------------
   BIODATA COVER

   The page opened with a photograph carrying the word "Biodata", and then
   a blush band underneath repeating what the page was for. Two
   introductions to one page. The band's words now sit inside the
   photograph and the band is gone.

   The picture is a 2:1 frame and the whole of it is meant to be seen, so
   the cover is sized to show it whole: the header's own height on top,
   then a box exactly half as tall as the window is wide, which is the
   picture's own shape. Nothing is cropped and nothing hides behind the
   header.

   Everything is scoped to this page so the other six covers, which are
   still a photograph with a page name at its foot, are untouched. The
   selectors are two levels deep, which puts them above editorial.css's
   own .cover rules wherever the stylesheets fall in the order.
   ------------------------------------------------------------ */
body[data-page="caregivers"] .cover {
  min-height: 0;
  height: calc(50vw + var(--header-h, 86px));
  max-height: 88vh;
  display: grid;
  align-items: center;
  justify-items: start;
  padding: var(--header-h, 86px) clamp(20px, 6vw, 96px) 0;
}
/* editorial.css, which loads after this file, sets this page's
   --cover-focus to 2%. That is right: on a wide, short window the cover
   hits its maximum height and the picture is cropped, and a crop from
   the bottom loses floor where one from the middle would lose her face.
   Left as it is rather than overridden here — wizard.js reads whatever
   the focus turns out to be when it pins the card to her palm. */

/* She stands on the right of the frame and the room behind her is bright,
   so the wash is darkest where the words are and thins out over her. */
body[data-page="caregivers"] .cover-shade {
  background:
    linear-gradient(90deg, rgba(26,26,26,.78) 0%, rgba(26,26,26,.62) 34%, rgba(26,26,26,.22) 62%, rgba(26,26,26,.12) 100%),
    linear-gradient(180deg, rgba(26,26,26,.32) 0%, rgba(26,26,26,.18) 45%, rgba(26,26,26,.42) 100%);
}

.cover-field {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  max-width: 34rem;
  color: #fff;
  text-align: left;
}
.cover-field .ed-label { margin: 0; color: rgba(255,255,255,.82); }
.cover-field h1 {
  margin: 0;
  max-width: 16ch;
  font-family: var(--ed-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 4px 26px rgba(0,0,0,.45);
}
.cover-field-text {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(.98rem, 1.1vw, 1.12rem);
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.4);
}

@media (max-width: 760px) {
  /* Half the window's width is 195px on a phone — not a cover. The square
     crop comes back and the box is sized by the words inside it. */
  body[data-page="caregivers"] .cover {
    height: auto;
    max-height: none;
    /* Tall enough that her face clears the headline: the words sit at the
       foot of the frame, she looks out over the top of them. */
    min-height: 0;
    align-items: end;
    align-content: end;
    /* The top band is left to the photograph — her face sits in it — and
       the words start below. */
    padding: calc(var(--header-h, 72px) + 30vh) 20px clamp(32px, 7vh, 56px);
  }
  /* The cover is a grid, so the care guide's bar becomes a second row
     under the copy rather than a column beside it. */
  body[data-page="caregivers"] .cover > .cover-point { justify-self: stretch; }
  body[data-page="caregivers"] .cover-shade {
    background: linear-gradient(180deg, rgba(26,26,26,.46) 0%, rgba(26,26,26,.40) 38%, rgba(26,26,26,.72) 100%);
  }
  .cover-field { max-width: 100%; }
  .cover-field h1 { max-width: 100%; }
}

/* ---- gate: three forms, one panel ---- */
.gate-form[hidden]{display:none}
.detail-hint{display:block;margin-top:5px;font-size:.8rem;color:#7a7a7a}
.gate-switch{margin:14px 0 0;font-size:.9rem;color:#5b5b5b;text-align:center}
.gate-switch-sep{margin:0 6px;color:#c4c4c4}
.gate-link{padding:0;border:0;background:none;font:inherit;font-weight:600;
  color:var(--tc-crimson,#8B0909);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gate-link:hover,.gate-link:focus-visible{color:var(--tc-ink,#1A1A1A)}

/* ---- compare: who the buttons are about ---- */
.cmp-summary{margin:20px 0 0;padding:16px 18px;border-radius:14px;background:var(--tc-blush,#FFE4E1)}
.cmp-sum-label{margin:0 0 10px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tc-deep,#B22222);font-weight:700}
.cmp-sum-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cmp-sum-chip{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff}
.cmp-sum-chip img,.cmp-sum-initials{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:0 0 auto}
.cmp-sum-initials{display:grid;place-items:center;background:var(--tc-ink,#1A1A1A);color:#fff;font-size:.72rem;font-weight:700}
.cmp-sum-chip strong{display:block;font-size:.9rem;line-height:1.2;color:var(--tc-ink,#1A1A1A)}
.cmp-sum-chip small{display:block;font-size:.74rem;color:#7a7a7a}
.cmp-actions .bio-btn:disabled{opacity:.4;cursor:not-allowed}
.cmp-actions .bio-btn{flex:1 1 180px}

/* The group name on an active-filter pill, so two pills reading "Elderly
   Care" are visibly two different filters. */
.active-pill em {
  font-style: normal;
  margin-right: 7px;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a8a8a;
}


/* ---------- gallery arrows ----------
   A step left and right through a helper's photographs, on the picture
   itself. The thumbnails already do this, but an arrow is what people
   reach for on a photo, and on a phone the thumbs are small. Shown only
   when there is more than one photograph to step to. On a desktop they
   fade in when the pointer is over the picture; on a touch screen there
   is no hover, so they are always there. */
.bio-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 30px; height: 30px;
  margin-top: -15px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  color: var(--tc-ink);
  box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 0 0 1px rgba(26,26,26,.08);
  display: grid; place-items: center;
  cursor: pointer;
  /* Visible from the start, not on hover. A control that only appears
     once the pointer is already over the picture is a control most
     people never find out about — and on the card the thumbnails below
     are the same size whether or not a photograph is behind them, so
     nothing else says the picture can be stepped through. */
  opacity: .82;
  transition: opacity .18s ease, background .18s ease, transform .18s ease;
}
.bio-arrow svg { width: 13px; height: 13px; }
.bio-arrow--prev { left: 8px; }
.bio-arrow--next { right: 8px; }
.bio-arrow:hover, .bio-arrow:focus-visible { background: #fff; transform: scale(1.06); }
.bio-photo:hover .bio-arrow, .bio-photo:focus-within .bio-arrow, .bio-arrow:focus-visible { opacity: 1; }
/* The strip of thumbnails sits below the picture, so the arrows are
   positioned within the picture's own box, not the whole column. */
.bio-shots-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
.bio-shots-wrap > .bio-shots { flex: 1 1 auto; width: 100%; }

/* The names in the compare summary are the way to each helper's sheet, so
   they have to look like controls rather than labels. */
.cmp-sum-list li { display: flex; }
button.cmp-sum-chip {
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow .16s ease, transform .16s ease;
}
button.cmp-sum-chip:hover, button.cmp-sum-chip:focus-visible {
  box-shadow: inset 0 0 0 2px var(--tc-crimson, #8B0909);
  transform: translateY(-1px);
}
.cmp-sum-hint { font-weight: 600; color: #9a6a6a; text-transform: none; letter-spacing: .02em; }

/* ---------- Account: the consent line and the busy button ---------- */
.detail-consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;font-size:.88rem;line-height:1.45;color:#4a4d53;cursor:pointer}
.detail-consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--tc-crimson,#8B0909)}
.detail-consent a{color:var(--tc-crimson,#8B0909);font-weight:600}
.detail-gate-go.is-busy{opacity:.7;cursor:progress}
.detail-gate-go.is-busy::after{content:"…"}

/* Care-experience chips on the profile page take the category's colour. */
ul.bio-chips--child li   { background: #91F6F4; color: #10484C; }
ul.bio-chips--elderly li { background: #BBFA46; color: #33511A; }

/* ---------- Member features ---------- */
.bio-toolbar { flex-wrap: wrap; }
.bio-save-search {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(26,26,26,.25); background: #fff; color: var(--tc-ink);
  font: 700 .88rem "Manrope", sans-serif; cursor: pointer;
}
.bio-save-search svg { width: 17px; height: 17px; }
.bio-save-search:hover { border-color: var(--tc-ink); }
.bio-save-search[hidden] { display: none; }
.bio-save-panel {
  margin: 0 0 18px; padding: 20px 22px; border-radius: 18px; background: #fff;
  border: 1px solid var(--tc-grey); box-shadow: 0 14px 34px rgba(26,26,26,.08);
}
.bio-save-panel[hidden] { display: none; }
.bio-save-title { margin: 0; font: 800 1.1rem "Manrope", sans-serif; }
.bio-save-sub { margin: 4px 0 14px; color: var(--tc-slate); font-size: .92rem; }
.bio-save-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bio-save-actions .bio-btn { min-height: 46px; flex: 0 1 auto; padding: 0 22px; }

.bio-note {
  display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; padding: 10px 12px;
  border-radius: 12px; background: #FFF8E6; color: #5A4300; font-size: .9rem; line-height: 1.45;
}
.bio-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.bio-foryou {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: #fff; color: #8B0909; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

.tc-unread {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: #8B0909; color: #fff; font-size: .72rem; font-weight: 800; vertical-align: 1px;
}

.cmp-section th { background: #FBF3F1; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-slate); text-align: left; }
.cmp-locked td { color: var(--tc-slate); }

/* Reserved: another family is holding her. Amber, still. */
.bio-status--reserved {
  color: #F5C66B;
  background: rgba(245,166,35,.14);
  box-shadow: inset 0 0 0 1px rgba(245,198,107,.36);
}
.bio-status--reserved::before { background: #F2A93B; }

/* Country flag on the list-view photo's top-left corner (the browse grid
   has its own, bottom-right of the round photo). */
.bio-photo--empty { position: relative; }
.bio-flagmark {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #fff; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.tc-flag--in { background: linear-gradient(#CE1126 50%, #fff 50%); }
.tc-flag--ph { background: linear-gradient(#0038A8 50%, #CE1126 50%); }
.tc-flag--ph::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 58%;
  background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.tc-flag--ph::before {
  content: ""; position: absolute; z-index: 1; left: 13%; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: #FCD116;
}