/* ============================================================
   helper.css, one helper's full biodata (helper.html)
   The page a family reaches from "More Details" once they have an
   account. Same parts as the biodata card — the ink identity bar, the
   photograph column, the chip palette — opened out into a page with
   three tabs and the actions alongside.
   ============================================================ */

body[data-page="helper"] { background: #FBF3F1; }

.hp-page {
  padding: calc(var(--header-h, 86px) + 22px) 0 72px;
}
.hp-wrap {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
}

/* ---------- Back link and previous / next ---------- */
.hp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.hp-back,
.hp-pager a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--tc-ink);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background .2s ease;
}
.hp-back { padding-left: 8px; }
.hp-back:hover,
.hp-pager a:hover { background: rgba(26,26,26,.06); }
.hp-back svg,
.hp-pager svg { width: 14px; height: 14px; flex: none; }
.hp-pager { display: flex; gap: 4px; }
.hp-pager a { border: 1px solid rgba(26,26,26,.16); background: #fff; }

/* ---------- Layout: biodata on the left, actions on the right ---------- */
.hp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.hp-main {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--tc-grey);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(26,26,26,.06);
}

/* ---------- Identity: photograph, name and the photo strip ----------
   White, like the rest of the card. The main photograph runs the full
   height of the header; the four photo slots sit beside the name, in the
   space that used to stand empty under the highlights. */
.hp-head {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  background: #fff;
  color: var(--tc-ink);
  border-bottom: 1px solid var(--tc-grey);
}
.hp-photo { padding: 18px 0 18px 18px; }
.hp-photo .bio-photo {
  height: 100%;
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--tc-blush);
}
.hp-photo .bio-photo--has-photo { background: #f4f4f4; }
.hp-photo .bio-shots-wrap { aspect-ratio: 3 / 4; height: auto; }
.hp-photo .bio-shots { min-height: 0; }
.hp-photo .bio-dots { display: none; }
.hp-photo .bio-photo:not(.bio-photo--has-photo) { aspect-ratio: 3 / 4; }

.hp-id {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px 22px;
  min-width: 0;
}
.hp-flags { display: flex; flex-wrap: wrap; gap: 8px; }
/* The availability pill was drawn for the black bar; on white it needs
   its own ink. */
.hp-head .bio-status--available {
  color: #1E6B34;
  background: #E4F5E6;
  box-shadow: inset 0 0 0 1px rgba(30,107,52,.22);
}
.hp-head .bio-status--placed { color: var(--tc-slate); background: #F1F1F1; }
.hp-name {
  margin: 0;
  font-family: "Questrial", "Manrope", sans-serif;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tc-ink);
}
.hp-ref {
  margin: -4px 0 0;
  color: var(--tc-slate);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.hp-head .bio-origin { background: #FFEEEC; color: var(--tc-ink); }
.hp-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  border-radius: 14px;
  overflow: hidden;
  background: #F0E4E2;
  border: 1px solid #F0E4E2;
}
.hp-facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: #FBF3F1;
}
.hp-facts span {
  color: var(--tc-slate);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hp-facts b { font-size: 1.05rem; font-weight: 700; color: var(--tc-ink); }
.hp-hl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hp-hl li {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(26,26,26,.18);
  color: var(--tc-ink);
  font-size: .88rem;
  font-weight: 600;
}

/* The photo strip, moved out of the photograph column. */
.hp-thumbs { margin-top: auto; }
.hp-thumbs:empty { display: none; }
.hp-thumbs .bio-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  background: transparent;
}
.hp-thumbs .bio-thumb { border-radius: 12px; }
.hp-thumbs .bio-thumb--empty { font-size: .64rem; }

/* ---------- Tabs ---------- */
.hp-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--tc-grey);
  background: #fff;
}
.hp-tab {
  position: relative;
  min-height: 58px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--tc-slate);
  font: 700 1rem/1.2 "Manrope", sans-serif;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.hp-tab:hover { color: var(--tc-ink); background: #FBF3F1; }
.hp-tab[aria-selected="true"] { color: var(--tc-ink); }
.hp-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--tc-crimson, #8B0909);
}
.hp-tab:focus-visible { outline: 3px solid var(--tc-crimson, #8B0909); outline-offset: -3px; }

.hp-panel { padding: 28px 30px 32px; }
.hp-panel[hidden] { display: none; }

.hp-sub,
.hp-block h3,
.hp-qa h3,
.hp-will-col h3 {
  margin: 0 0 12px;
  font-family: "Manrope", sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--tc-ink);
}
.hp-sub { margin-top: 30px; }

/* ---------- Personal Info ---------- */
.hp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid var(--tc-grey);
  border-radius: 16px;
  overflow: hidden;
}
.hp-row { margin: 0; }
.hp-grid .hp-row {
  padding: 14px 18px;
  border-bottom: 1px solid #EFEFEF;
  border-right: 1px solid #EFEFEF;
}
.hp-grid .hp-row:nth-child(3n) { border-right: 0; }
.hp-row dt {
  margin: 0 0 4px;
  color: var(--tc-slate);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.hp-row dd { margin: 0; color: var(--tc-ink); font-weight: 600; line-height: 1.4; }

.hp-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;
  margin-top: 26px;
}
.hp-langs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hp-langs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 12px;
  background: #FFEEEC;
  font-weight: 600;
}
.hp-lvl {
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  font-size: .8rem;
  font-weight: 700;
}
.hp-lvl--excellent,
.hp-lvl--good { color: #1E6B34; }
.hp-lvl--average { color: #6B3D06; }
.hp-lvl--learning,
.hp-lvl--poor { color: var(--tc-slate); }

.hp-quote {
  margin: 28px 0 0;
  padding: 22px 26px;
  border-radius: 16px;
  background: #FFEEEC;
}
.hp-quote blockquote {
  margin: 0;
  font-family: var(--ed-serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
  line-height: 1.3;
  color: var(--tc-ink);
}
.hp-quote figcaption { margin-top: 8px; color: var(--tc-slate); font-size: .9rem; font-weight: 600; }

/* ---------- Employment History ---------- */
.hp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.hp-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #FFEEEC;
}
.hp-stat b { font: 800 1.2rem/1.2 "Manrope", sans-serif; color: var(--tc-ink); }
.hp-stat span { color: var(--tc-slate); font-size: .86rem; font-weight: 600; }

.hp-jobs { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.hp-job {
  position: relative;
  padding: 20px 22px 18px 26px;
  border: 1px solid var(--tc-grey);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.hp-job::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #F9E2FF;
}
.hp-job--local::before { background: #FFD6A6; }
.hp-job-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "where where contract"
    "place place contract"
    "period period period";
  align-items: center;
  gap: 4px 14px;
}
.hp-where {
  grid-area: where;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 4px 11px;
  border-radius: 999px;
  background: #F9E2FF;
  color: #57206B;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hp-job--local .hp-where { background: #FFD6A6; color: #6B3D06; }
.hp-where svg { width: 14px; height: 14px; }
.hp-job-head h3 {
  grid-area: place;
  margin: 6px 0 0;
  font: 800 1.25rem/1.25 "Manrope", sans-serif;
  color: var(--tc-ink);
}
.hp-period {
  grid-area: period;
  margin: 2px 0 0;
  color: var(--tc-slate);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hp-contract {
  grid-area: contract;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
}
.hp-contract svg { width: 14px; height: 14px; }
.hp-contract--done { background: #E4F5E6; color: #1E6B34; }
.hp-contract--early { background: #FFF1D6; color: #6B4A06; }
.hp-contract--nil { background: #F1F1F1; color: var(--tc-slate); }

.hp-job-work {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
}
.hp-mini {
  color: var(--tc-slate);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.hp-job-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 14px 0 0;
}
.hp-row--wide { grid-column: 1 / -1; }

.hp-empty {
  margin: 0;
  padding: 22px;
  border-radius: 16px;
  background: #FFEEEC;
  color: var(--tc-ink);
  line-height: 1.55;
}

/* ---------- Willingness ---------- */
.hp-will-sum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.hp-will-col {
  padding: 18px 20px;
  border-radius: 16px;
  background: #EAF7EC;
}
.hp-will-col--no { background: #F4F4F4; }
.hp-will-col ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hp-will-col li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: #fff;
  font-size: .9rem;
  font-weight: 600;
  color: #1E4D29;
}
.hp-will-col--no li { color: var(--tc-slate); }
.hp-will-col svg { width: 14px; height: 14px; flex: none; }

.hp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--tc-grey);
  border-radius: 16px;
}
.hp-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.hp-table th,
.hp-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #EFEFEF;
  text-align: left;
  vertical-align: middle;
}
.hp-table tbody tr:last-child > * { border-bottom: 0; }
.hp-table thead th {
  background: #FBF3F1;
  color: var(--tc-slate);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.hp-table tbody th { font-weight: 600; color: var(--tc-ink); }
.hp-table tbody tr:nth-child(even) { background: #FCFAFA; }

.hp-yn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
}
.hp-yn svg { width: 14px; height: 14px; flex: none; }
.hp-yn--yes { color: #1E6B34; }
.hp-yn--no { color: #9A2C2C; }
.hp-yn--nil { color: #8D9094; font-weight: 600; }

.hp-stars { display: inline-flex; gap: 3px; }
.hp-stars i {
  width: 14px;
  height: 14px;
  background: #E3E3E3;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.hp-stars i.on { background: #E8A33A; }
.hp-stars--nil { color: #8D9094; }

.hp-qas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.hp-qa {
  padding: 18px 20px;
  border: 1px solid var(--tc-grey);
  border-radius: 16px;
}
.hp-qa dl { display: grid; gap: 10px; margin: 0; }
.hp-qa-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #E6E6E6;
}
.hp-qa-row:last-child { padding-bottom: 0; border-bottom: 0; }
.hp-qa-row dt { color: var(--tc-ink); line-height: 1.4; }
.hp-qa-row dd { margin: 0; flex: none; text-align: right; }
.hp-qa-row dd b { color: var(--tc-ink); }

.hp-demo {
  margin: 0;
  padding: 14px 30px 22px;
  color: var(--tc-slate);
  font-size: .88rem;
}

/* ---------- Actions ---------- */
.hp-side {
  position: sticky;
  top: calc(var(--header-h, 86px) + 20px);
  display: grid;
  gap: 14px;
}
.hp-side-card,
.hp-locked-card {
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--tc-grey);
  box-shadow: 0 14px 34px rgba(26,26,26,.06);
}
.hp-side-title {
  margin: 0;
  font-family: var(--ed-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tc-ink);
}
.hp-side-text { margin: 0 0 4px; color: var(--tc-slate); line-height: 1.5; }
.hp-side .bio-btn,
.hp-locked-card .bio-btn { width: 100%; min-height: 50px; justify-content: center; }
.hp-btn-line {
  border: 1px solid rgba(26,26,26,.28);
  background: #fff;
  color: var(--tc-ink);
}
.hp-btn-line:hover { border-color: var(--tc-ink); background: rgba(26,26,26,.04); }
.hp-side-note {
  margin: 0;
  padding: 0 6px;
  color: var(--tc-slate);
  font-size: .86rem;
  line-height: 1.5;
}

/* ---------- Not signed in, or no such helper ---------- */
.hp-locked {
  display: grid;
  place-items: center;
  min-height: 52vh;
}
.hp-locked-card { width: min(460px, 100%); text-align: center; }
.hp-locked-card .hp-back { justify-self: center; }
.hp-missing {
  max-width: 560px;
  margin: 8vh auto;
  text-align: center;
}
.hp-missing h1 { font-family: var(--ed-serif, Georgia, serif); font-weight: 600; }

/* The tray sits over the foot of the page; leave room for it. */
body.has-video-tray .hp-page { padding-bottom: 150px; }

/* ---------- Narrower windows ---------- */
@media (max-width: 1100px) {
  .hp-layout { grid-template-columns: minmax(0, 1fr); }
  .hp-side { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .hp-head { grid-template-columns: 300px minmax(0, 1fr); }
  .hp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hp-wrap { width: calc(100% - 32px); }
  .hp-page { padding-top: calc(var(--header-h, 72px) + 12px); }
  .hp-pager span { display: none; }
  .hp-pager a { padding: 0 12px; }

  .hp-head { grid-template-columns: minmax(0, 1fr); }
  .hp-photo { padding: 14px 14px 0; }
  .hp-id { padding: 14px 18px 22px; }
  /* On a phone the strip goes straight under the photograph. */
  .hp-thumbs { order: -1; margin: 0 0 6px; }
  .hp-thumbs .bio-thumbs { gap: 8px; }

  .hp-tabs { position: sticky; top: var(--header-h, 72px); z-index: 5; }
  .hp-tab { min-height: 54px; font-size: .9rem; padding: 0 6px; }
  .hp-tab[aria-selected="true"]::after { left: 10%; right: 10%; }

  .hp-panel { padding: 22px 18px 26px; }
  .hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-grid .hp-row:nth-child(3n) { border-right: 1px solid #EFEFEF; }
  .hp-grid .hp-row:nth-child(2n) { border-right: 0; }
  .hp-grid .hp-row { padding: 12px 14px; }
  .hp-blocks,
  .hp-qas,
  .hp-job-grid { grid-template-columns: minmax(0, 1fr); }

  .hp-job { padding: 18px 16px 16px 20px; }
  .hp-job-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "where" "place" "period" "contract";
  }
  .hp-contract { justify-self: start; margin-top: 8px; white-space: normal; }

  /* A four-column table does not fit a phone. Each task becomes a row of
     its own: the task on top, then experience, willingness and the
     agency's assessment side by side, each with its label. */
  .hp-table { min-width: 0; }
  .hp-table thead { display: none; }
  .hp-table,
  .hp-table tbody { display: block; }
  .hp-table tr {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 12px 14px;
    border-bottom: 1px solid #EFEFEF;
  }
  .hp-table tbody tr:last-child { border-bottom: 0; }
  .hp-table th,
  .hp-table td { display: block; padding: 0; border: 0; }
  .hp-table tbody th { flex: 1 1 100%; font-size: .98rem; }
  .hp-table td { display: flex; flex-direction: column; gap: 2px; }
  .hp-table td::before {
    content: attr(data-label);
    color: var(--tc-slate);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .hp-qa { padding: 16px; }

  .hp-side { grid-template-columns: minmax(0, 1fr); }
  .hp-demo { padding: 12px 18px 20px; }
}

/* Long answers read as prose, not as labels. */
.hp-job-grid .hp-row dd { font-weight: 500; }
.hp-row--wide dd { font-weight: 400; line-height: 1.55; }
.hp-table tbody th { font-size: .98rem; }

/* On a phone the photograph would otherwise fill the whole first screen
   at 3:4. Square keeps her face and shoulders and leaves the name and
   the facts in view. */
@media (max-width: 760px) {
  .hp-photo .bio-shots-wrap { aspect-ratio: 1 / 1; max-height: 420px; }
  .hp-photo .bio-photo:not(.bio-photo--has-photo) { aspect-ratio: 16 / 9; }
  .hp-photo .bio-shots img { object-position: 50% 14%; }
}

/* The pending-photo silhouette is positioned against the photo box. */
.hp-photo .bio-photo { position: relative; }
.hp-facts b { white-space: nowrap; }

/* ============================================================
   Round two: what the family asked for and what the review found
   ============================================================ */

/* Sticky tabs. The card had overflow hidden for its corners, which
   also stops position: sticky, so the corners are drawn on the head and
   the last panel instead. */
.hp-main { overflow: visible; }
.hp-head { border-radius: 20px 20px 0 0; overflow: hidden; }
.hp-panel:last-of-type,
.hp-demo:last-child { border-radius: 0 0 20px 20px; }
.hp-tabs {
  position: sticky;
  top: var(--header-h, 86px);
  z-index: 5;
  background: #fff;
  box-shadow: 0 1px 0 var(--tc-grey);
}

/* "Matches what you asked for" */
.hp-fits {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: #E4F5E6;
  color: #1E4D29;
  font-size: .92rem;
  line-height: 1.45;
}
.hp-fits strong { font-weight: 700; }

.hp-pager { align-items: center; }
.hp-pager-count { color: var(--tc-slate); font-size: .86rem; font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; }
.hp-more-photos { margin: 0; color: var(--tc-slate); font-size: .86rem; }

/* Timeline */
.hp-timeline { margin: 0 0 24px; padding: 14px 16px 10px; border: 1px solid var(--tc-grey); border-radius: 16px; }
.hp-tl-years { position: relative; height: 18px; margin: 0 0 6px; }
.hp-tl-year {
  position: absolute; top: 0; transform: translateX(-50%);
  color: var(--tc-slate); font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hp-tl-year:first-child { transform: none; }
.hp-tl-year:last-child { transform: translateX(-100%); }
.hp-tl-bars {
  position: relative;
  height: calc(var(--rows, 1) * 30px);
  background:
    repeating-linear-gradient(90deg, rgba(26,26,26,.08) 0 1px, transparent 1px 100%) 0 0 / calc(100% / max(1, var(--cols, 8))) 100%,
    #FBF3F1;
  border-radius: 8px;
  overflow: hidden;
}
.hp-tl-bar {
  position: absolute;
  height: 22px;
  margin-top: 4px;
  border-radius: 6px;
  background: #E5C2F2;
  color: #57206B;
  font-size: .78rem;
  font-weight: 700;
  line-height: 22px;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-tl-bar--local { background: #FFD6A6; color: #6B3D06; }
.hp-tl-bar:nth-child(1) { top: 0; }
.hp-tl-bar:nth-child(2) { top: 30px; }
.hp-tl-bar:nth-child(3) { top: 60px; }
.hp-tl-bar:nth-child(4) { top: 90px; }
.hp-tl-bar:nth-child(5) { top: 120px; }
.hp-tl-key { display: flex; align-items: center; gap: 6px 8px; margin: 10px 0 0; color: var(--tc-slate); font-size: .78rem; font-weight: 600; }
.hp-tl-key i { width: 14px; height: 10px; border-radius: 3px; background: #E5C2F2; }
.hp-tl-key i + i, .hp-tl-key--local { margin-left: 8px; }
.hp-tl-key .hp-tl-key--local { background: #FFD6A6; }

/* A gap between jobs */
.hp-gap {
  margin: -4px 0;
  padding: 10px 16px 10px 26px;
  color: var(--tc-slate);
  font-size: .9rem;
  line-height: 1.5;
  border-left: 2px dashed #D9C6C3;
  margin-left: 22px;
}
.hp-gap span { color: var(--tc-ink); font-weight: 600; }

/* Stars legend */
.hp-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 4px 0;
  color: var(--tc-slate);
  font-size: .86rem;
  line-height: 1.5;
}
.hp-legend .hp-stars { flex: none; }

/* Side card additions */
.hp-video { display: grid; gap: 6px; margin-bottom: 4px; }
.hp-video video { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 16 / 9; }
.hp-side .hp-btn-line svg, .hp-side-card svg { width: 16px; height: 16px; margin-right: 6px; }
.hp-side-card--placed { background: #FBF3F1; }
.hp-side-card--placed .hp-side-title { color: var(--tc-slate); }
.hp-print-h { display: none; }

/* Print: the whole profile, all three sections, nothing else. */
@media print {
  .site-header, .mobile-nav, .hp-nav, .hp-side, .hp-tabs, .bio-tray, .closing, .site-footer,
  .hp-thumbs, .bio-arrow, .bio-dots, .hp-btn-print, .whatsapp-float, [data-wa-sheet], [data-detail-sheet], [data-compare-sheet] { display: none !important; }
  body[data-page="helper"] { background: #fff; }
  .hp-page { padding: 0; }
  .hp-wrap { width: 100%; }
  .hp-layout { grid-template-columns: 1fr; }
  .hp-main { box-shadow: none; border: 0; }
  .hp-head { grid-template-columns: 200px 1fr; border-bottom: 1px solid #ccc; break-inside: avoid; }
  .hp-photo .bio-shots-wrap { aspect-ratio: 3 / 4; }
  .hp-panel { display: block !important; padding: 18px 0; break-inside: auto; }
  .hp-print-h { display: block; margin: 0 0 14px; font: 800 1.2rem/1.2 "Manrope", sans-serif; border-bottom: 2px solid #1a1a1a; padding-bottom: 6px; }
  .hp-job, .hp-qa, .hp-table-wrap, .hp-timeline { break-inside: avoid; }
  .hp-table thead { display: table-header-group; }
  a[href]::after { content: none; }
}

/* ============================================================
   Account page
   ============================================================ */
body[data-page="account"] { background: #FBF3F1; }
body[data-page="account"] .bio-tray { display: none; }
.ac-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 32px;
  align-items: end;
  margin-bottom: 26px;
}
.ac-title {
  margin: 4px 0 8px;
  font-family: var(--ed-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1.05;
  color: var(--tc-ink);
}
.ac-sub { margin: 0; max-width: 56ch; color: var(--tc-slate); line-height: 1.55; }
.ac-demo { color: #8B0909; font-weight: 600; }
.ac-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ac-actions .bio-btn { min-height: 48px; }
.ac-section { margin-top: 30px; }
.ac-h2 { margin: 0 0 14px; font: 800 1.15rem/1.2 "Manrope", sans-serif; color: var(--tc-ink); }
.ac-cards .bio-card { background: #fff; }
.ac-viewed { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ac-viewed a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--tc-grey);
  color: var(--tc-ink); text-decoration: none;
}
.ac-viewed a:hover { border-color: #b9bcbe; }
.ac-viewed img, .ac-viewed-blank { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; object-position: 50% 18%; flex: none; }
.ac-viewed-blank { display: grid; place-items: center; background: var(--tc-blush); font: 700 .95rem "Manrope", sans-serif; }
.ac-viewed b { display: block; font-size: .95rem; }
.ac-viewed small { color: var(--tc-slate); font-size: .8rem; }
@media (max-width: 760px) {
  .ac-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ac-actions .bio-btn { flex: 1 1 auto; }
  .hp-gap { margin-left: 12px; }
  .hp-tl-bar { font-size: .7rem; padding: 0 5px; }
}

/* ============================================================
   Privacy notice
   ============================================================ */
.pn-wrap { max-width: 760px; }
.pn-head { margin-bottom: 8px; }
.pn-head h1 {
  margin: 6px 0 14px;
  font-family: var(--ed-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
  line-height: 1.05;
  color: var(--tc-ink);
}
.pn-lead { margin: 0 0 8px; font-size: 1.08rem; line-height: 1.6; color: var(--tc-ink); }
.pn-updated { margin: 0; color: var(--tc-slate); font-size: .88rem; }
.pn-sec { margin-top: 28px; padding: 22px 26px; background: #fff; border: 1px solid var(--tc-grey); border-radius: 18px; }
.pn-sec h2 { margin: 0 0 10px; font: 800 1.1rem/1.2 "Manrope", sans-serif; color: var(--tc-ink); }
.pn-sec p, .pn-sec li { line-height: 1.6; color: #2b2b2b; }
.pn-sec p { margin: 0 0 10px; }
.pn-sec p:last-child { margin-bottom: 0; }
.pn-sec ul { margin: 0 0 10px; padding-left: 20px; }
.pn-sec a { color: var(--tc-crimson, #8B0909); }
.pn-sec--bm { background: #FBF3F1; }

/* Care experience blocks on the Willingness tab */
.hp-exps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hp-exp { padding: 18px 20px; border: 1px solid var(--tc-grey); border-radius: 16px; }
.hp-exp h3 { margin: 0 0 10px; font: 800 1.05rem/1.2 "Manrope", sans-serif; color: var(--tc-ink); }
.hp-exp .hp-mini { display: block; margin: 10px 0 6px; }
.hp-exp .bio-chips { gap: 6px; }
@media (max-width: 760px) { .hp-exps { grid-template-columns: minmax(0, 1fr); } }

.hp-qa-row--long { flex-direction: column; gap: 4px; }
.hp-qa-row--long dd { text-align: left; }

/* Private note */
.hp-note { gap: 8px; }
.hp-note-label { font: 800 1rem "Manrope", sans-serif; color: var(--tc-ink); }
.hp-note textarea {
  width: 100%; min-height: 86px; padding: 12px 14px; border-radius: 12px; resize: vertical;
  border: 1px solid #d9d9d9; background: #FFF8E6; font: inherit; font-size: .95rem; line-height: 1.5; color: var(--tc-ink);
}
.hp-note textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tc-crimson, #8B0909); }
.hp-note-status { margin: 0; min-height: 1.2em; color: var(--tc-slate); font-size: .82rem; }

/* Account: saved searches */
.ac-searches { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ac-search {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px 16px; align-items: center;
  padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--tc-grey);
}
.ac-search.has-new { border-color: #8B0909; box-shadow: 0 0 0 3px rgba(139,9,9,.08); }
.ac-search-name { margin: 0; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-search-sub { margin: 2px 0 0; color: var(--tc-slate); font-size: .88rem; }
.ac-new { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: #8B0909; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.ac-switch { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--tc-slate); cursor: pointer; white-space: nowrap; }
.ac-switch input { width: 18px; height: 18px; accent-color: #8B0909; }
.ac-search-go { min-height: 42px; padding: 0 18px; }
.ac-search-del { border: 0; background: none; color: var(--tc-slate); text-decoration: underline; cursor: pointer; font: inherit; font-size: .86rem; }
.ac-search-del:hover { color: #8B0909; }

/* Account: messages */
.ac-thread {
  display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto;
  padding: 18px; border-radius: 16px 16px 0 0; background: #fff; border: 1px solid var(--tc-grey); border-bottom: 0;
}
.ac-thread-empty { margin: auto; max-width: 46ch; text-align: center; color: var(--tc-slate); line-height: 1.55; }
.ac-msg { max-width: min(560px, 82%); padding: 10px 14px; border-radius: 16px; line-height: 1.5; }
.ac-msg p { margin: 0; white-space: pre-wrap; }
.ac-msg--family { align-self: flex-end; background: #1a1a1a; color: #fff; border-bottom-right-radius: 4px; }
.ac-msg--consultant { align-self: flex-start; background: #FBF3F1; color: var(--tc-ink); border-bottom-left-radius: 4px; }
.ac-msg-meta { display: block; margin-top: 4px; font-size: .74rem; opacity: .7; }
.ac-msg-about { display: inline-block; margin-bottom: 4px; font-size: .76rem; font-weight: 700; color: inherit; opacity: .85; }
.ac-compose {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 12px; border-radius: 0 0 16px 16px; background: #fff; border: 1px solid var(--tc-grey);
}
.ac-compose select, .ac-compose textarea {
  width: 100%; min-height: 48px; padding: 12px; border-radius: 12px; border: 1px solid #d9d9d9; font: inherit; font-size: .95rem; background: #fff;
}
.ac-compose textarea { resize: vertical; }
.ac-compose .bio-btn { min-height: 48px; padding: 0 24px; }
.ac-compose .detail-gate-error { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) {
  .ac-search { grid-template-columns: minmax(0, 1fr) auto; }
  .ac-search-main { grid-column: 1 / -1; }
  .ac-compose { grid-template-columns: minmax(0, 1fr); }
  .ac-msg { max-width: 92%; }
}

/* ============================================================
   Browse (helpers.html): the signed-in family's grid
   ============================================================ */
body[data-page="browse"] { background: #FBF3F1; }
body[data-page="browse"] main { padding-top: calc(var(--header-h, 86px) + 10px); }
.br-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 6px; }
.br-title { margin: 4px 0 6px; font-family: var(--ed-serif, "Cormorant Garamond", Georgia, serif); font-weight: 500; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.05; color: var(--tc-ink); }
.br-sub { margin: 0; color: var(--tc-slate); }
.br-head-actions .bio-btn { min-height: 44px; padding: 0 20px; }

.br-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.br-view { display: inline-flex; gap: 8px; }
.br-view button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 18px; border-radius: 12px;
  border: 1px solid rgba(26,26,26,.2); background: #fff; color: var(--tc-ink); font: 700 .9rem "Manrope", sans-serif; cursor: pointer;
}
.br-view button svg { width: 16px; height: 16px; fill: currentColor; }
.br-view button[aria-pressed="true"] { background: var(--tc-ink); border-color: var(--tc-ink); color: #fff; }
.br-bar-actions { display: flex; gap: 8px; }
.br-bar-actions .bio-btn { min-height: 42px; padding: 0 20px; flex: 0 0 auto; }
.br-bar-actions [data-br-count] {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; background: #8B0909; color: #fff; font-size: .75rem;
}
.br-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 14px; color: var(--tc-slate); font-size: .88rem; }
.br-legend[hidden] { display: none; }
.br-legend-label { font-weight: 700; color: var(--tc-ink); }
.br-legend-item { display: inline-flex; align-items: center; gap: 6px; }

.bio-cards.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.br-card {
  display: flex; flex-direction: column; padding: 16px; border-radius: 18px; background: #fff;
  border: 1px solid var(--tc-grey); transition: border-color .2s, box-shadow .2s;
}
.br-card:hover { border-color: #b9bcbe; box-shadow: 0 10px 26px rgba(26,26,26,.08); }
.br-card.is-picked { border-color: #8B0909; box-shadow: 0 0 0 2px rgba(139,9,9,.12); }
.br-top { display: flex; justify-content: space-between; gap: 10px; }
.br-photo {
  position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: var(--tc-blush); overflow: visible; text-decoration: none; color: var(--tc-ink); font: 700 1.5rem "Manrope", sans-serif; flex: none;
}
.br-photo img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 16%; }
.br-flag { position: absolute; right: -2px; bottom: 2px; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.br-flag--in { background: linear-gradient(#CE1126 50%, #fff 50%); }
.br-flag--ph { background: linear-gradient(90deg, #fff 0 34%, transparent 34%), linear-gradient(#0038A8 50%, #CE1126 50%); }
.br-flag--ph::after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 12px solid #fff; }
.br-top-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.br-compare { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--tc-ink); cursor: pointer; }
.br-compare input { width: 17px; height: 17px; accent-color: #8B0909; }
.br-flags .bio-new { min-height: 24px; padding: 0 10px; font-size: .68rem; }
.br-wa { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #25D366; color: #0B2B16; cursor: pointer; }
.br-wa svg { width: 20px; height: 20px; }
.br-name { margin: 12px 0 0; font: 800 1.05rem/1.25 "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.br-name a { color: var(--tc-ink); text-decoration: none; }
.br-name a:hover { color: #8B0909; }
.br-ref { margin: 2px 0 10px; color: var(--tc-slate); font-size: .82rem; }
.br-facts { display: grid; gap: 4px; margin: 0; padding: 0 0 12px; border-bottom: 1px solid #efefef; }
.br-facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font-size: .9rem; }
.br-facts dt { font-weight: 700; color: var(--tc-ink); }
.br-facts dd { margin: 0; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-skills { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 4px; }
.br-skill { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.br-skill svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.br-skill--newborn { background: #FFD6A6; color: #6B3D06; }
.br-skill--child { background: #91F6F4; color: #10484C; }
.br-skill--elderly { background: #BBFA46; color: #33511A; }
.br-skill--bedridden { background: #FFDCE8; color: #6B1F45; }
.br-skill--house { background: #FFFE83; color: #5E5206; }
.br-skill--cooking { background: #FFEEEC; color: #8B0909; }
.br-skill--pets { background: #DCDEFF; color: #232B7A; }
.br-skill.is-off { background: #F3F3F3; color: #C6C6C6; }
.br-note { display: flex; gap: 6px; margin: 8px 0 0; padding: 7px 9px; border-radius: 10px; background: #FFF8E6; color: #5A4300; font-size: .82rem; line-height: 1.4; }
.br-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.br-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 12px; }
.br-actions .bio-btn { min-height: 42px; padding: 0 8px; font-size: .78rem; text-align: center; }
@media (max-width: 760px) {
  .br-head { flex-direction: column; align-items: flex-start; }
  .bio-cards.br-grid { grid-template-columns: minmax(0, 1fr); }
  .br-bar-actions .bio-btn { padding: 0 14px; }
}
body[data-page="browse"] .bio-layout { background: transparent; padding-top: 14px; }
@media (max-width: 760px) {
  .br-head-actions { display: none; }          /* "My account" is in the menu on a phone */
  .br-title { font-size: 1.7rem; }
  .br-head { padding-top: 14px; }
}

/* ---------- Quieter type on the profile page ----------
   The uppercase bold name, the bold values and the shouting buttons made
   the page feel loud. Sentence-case buttons, lighter weights, a smaller
   name. */
.hp-name {
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 500;
  letter-spacing: .01em;
}
.hp-facts b { font-size: .98rem; font-weight: 500; }
.hp-facts span { font-weight: 600; }
.hp-hl li { font-weight: 500; font-size: .85rem; }
.hp-grid .hp-row dd,
.hp-job-grid .hp-row dd { font-weight: 400; }
.hp-row dt { font-weight: 600; }
.hp-side-title { font-size: 1.45rem; font-weight: 500; }
.hp-side .bio-btn,
.hp-locked-card .bio-btn {
  min-height: 46px;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
}
.hp-tab { font-weight: 600; font-size: .95rem; }
.hp-job-head h3 { font-weight: 700; font-size: 1.1rem; }
.hp-stat b { font-weight: 700; font-size: 1.05rem; }
.hp-langs li { font-weight: 500; }
.hp-qa-row dd b { font-weight: 600; }

/* Four photo squares beside the name */
.hp-thumbs .bio-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hp-thumbs .bio-thumb { aspect-ratio: 1 / 1; border-radius: 12px; }
.hp-thumbs .bio-thumb--empty {
  display: grid; place-items: center;
  background: #F4EFEE; border: 1px dashed #DCCFCC; color: #9A8F8D;
  font-size: .68rem; letter-spacing: .04em;
}
.hp-facts b { white-space: normal; }
.hp-tl-title { margin: 0; font: 700 .98rem "Manrope", sans-serif; color: var(--tc-ink); }
.hp-tl-help { margin: 2px 0 12px; color: var(--tc-slate); font-size: .86rem; line-height: 1.45; }
.hp-tl-bars { overflow: visible; }
.hp-tl-bar--label-left, .hp-tl-bar--label-right { overflow: visible; }
.hp-tl-bar--label-left span, .hp-tl-bar--label-right span {
  position: absolute; top: 0; white-space: nowrap; color: var(--tc-ink); font-weight: 600;
}
.hp-tl-bar--label-left span { right: calc(100% + 8px); }
.hp-tl-bar--label-right span { left: calc(100% + 8px); }

.hp-head .bio-status--reserved { color: #8A5A00; background: #FFF1D6; box-shadow: none; }
.hp-side-card--reserved { background: #FFF8EA; }
.hp-side-card--reserved .hp-side-title { color: #8A5A00; }

/* ---- Timeline: the country sits inside its bar, never beside it ---- */
.hp-tl-bar, .hp-tl-bar--label-left, .hp-tl-bar--label-right { overflow: hidden; text-overflow: clip; text-align: center; padding: 0 6px; }
.hp-tl-bar span { position: static !important; display: inline-block; white-space: nowrap; }
.hp-tl-bar span[hidden] { display: none; }

/* ---- Tabs as folder tabs, each with its own colour; the open tab and its
   page share the colour, so they read as one sheet. ---- */
.hp-tabs {
  --tab-personal: #FFF6C9;
  --tab-employment: #FFE6CC;
  --tab-willingness: #DDEEFF;
  gap: 8px;
  padding: 14px 16px 0;
  border-bottom: 0;
  background: #fff;
  align-items: end;
}
.hp-tab {
  min-height: 50px;
  border-radius: 14px 14px 0 0;
  color: rgba(26,26,26,.62);
  box-shadow: inset 0 -1px 0 rgba(26,26,26,.08);
  transition: min-height .15s ease, color .15s ease, filter .15s ease;
}
.hp-tab[aria-selected="true"]::after { display: none; }
.hp-tab[data-hp-tab="personal"]    { background: var(--tab-personal); }
.hp-tab[data-hp-tab="employment"]  { background: var(--tab-employment); }
.hp-tab[data-hp-tab="willingness"] { background: var(--tab-willingness); }
.hp-tab:hover { color: var(--tc-ink); filter: brightness(.98); }
.hp-tab[aria-selected="true"] { min-height: 58px; color: var(--tc-ink); box-shadow: none; }
#panel-personal    { background: #FFF6C9; }
#panel-employment  { background: #FFE6CC; }
#panel-willingness { background: #DDEEFF; }
@media (max-width: 760px) {
  .hp-tabs { gap: 5px; padding: 10px 8px 0; }
  .hp-tab { min-height: 46px; border-radius: 12px 12px 0 0; }
  .hp-tab[aria-selected="true"] { min-height: 54px; }
}

/* On the coloured tab pages, the boxes inside are white, and the pills
   in them carry the colour instead. */
.hp-panel .hp-grid,
.hp-panel .hp-will-col,
.hp-panel .hp-will-col--no,
.hp-panel .hp-exp,
.hp-panel .hp-qa,
.hp-panel .hp-timeline { background: #fff; }
.hp-panel .hp-will-col { border: 1px solid rgba(26,26,26,.08); }
.hp-panel .hp-will-col li { background: #D6F5DC; color: #1E4D29; }
.hp-panel .hp-will-col--no li { background: #FBE3E3; color: #7A2E2E; }

/* No rule under the folder tabs: the tabs sit straight on their page. */
.hp-tabs.hp-tabs { box-shadow: none; border-bottom: 0; }
.hp-tabs .hp-tab { box-shadow: none; }

/* The tabs that are not open stand a little clear of the page (a gap, no
   line); the open one runs straight into it. */
.hp-tabs .hp-tab:not([aria-selected="true"]) { margin-bottom: 6px; border-radius: 14px; }
@media (max-width: 760px) {
  .hp-tabs .hp-tab:not([aria-selected="true"]) { margin-bottom: 5px; border-radius: 12px; }
}

/* Phones: the Shortlist and "Compare Shortlisted" buttons share the row
   and shrink to fit rather than push the page sideways. */
@media (max-width: 760px) {
  .br-bar-actions { width: 100%; }
  .br-bar-actions .bio-btn { flex: 1 1 0; min-width: 0; padding: 0 10px; white-space: nowrap; font-size: .78rem; }
}