/*
  Layout and components. Colours and fonts come from settings.js
  (as var(--name)), so there are no brand colours written in here.

  Built for phones first. At 860px wide and up, the layout opens
  into columns (see "WIDER SCREENS" at the bottom).
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  /* The footer sits at the bottom even on short pages (10 Oct 2026). */
  min-height: 100vh; display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; }

a { color: var(--accent); }

/* Side padding only: a shorthand here used to wipe out the space above the footer (14 Oct 2026). */
.wrap { max-width: 1080px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.wrap.narrow { max-width: 640px; }

/* ── HEADER / FOOTER ── */
.test-banner {
  background: var(--ink);
  color: var(--sand);
  font-size: 12px;
  text-align: center;
  padding: 6px 16px;
  letter-spacing: 0.02em;
}

.nav { border-bottom: 1px solid var(--line); background: var(--white); }
.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.nav-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mid);
  text-decoration: none;
}
.nav-link:hover { color: var(--accent); }
.nav-links { display: flex; gap: 18px; align-items: center; }
.nav-cta { color: var(--white); background: var(--accent); padding: 7px 14px; border-radius: 999px; }
.nav-cta:hover { color: var(--white); background: var(--accent-hover); }
.nav-cta.nav-outline, .nav-cta.nav-outline:hover { color: var(--accent); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--accent); }   /* one main button (28 Oct 2026) */
.nav-logo span, .nav-link { white-space: nowrap; }

/* Phones: only the main button stays in the header (the logo goes to the list,
   and "Log in" / "My account" are on every page that needs them). */
@media (max-width: 480px) {
  .nav-links .nav-link:not(.nav-cta):not(.nav-keep) { display: none; }
  .nav-logo { font-size: 16px; }
}

#site-footer {
  background: var(--ink);   /* ink with a thin sun line, like the main website (29 Oct 2026) */
  border-top: 3px solid var(--sun);
  color: rgba(255,255,255,0.7);
  padding: 32px 16px;
  margin-top: 56px;
  font-size: 13px;
  /* the whale-and-sun sign-off, bottom right of the 1080px column */
  background-image: var(--footer-sketch);
  background-repeat: no-repeat;
  background-size: 168px 72px;
  background-position: right 16px bottom 18px;
}

.footer-inner { max-width: 1080px; margin: 0 auto; padding-right: 190px; }
@media (min-width: 1113px) {
  #site-footer { background-position: left calc(50% + 456px) bottom 18px; }
}
@media (max-width: 600px) {
  /* No whale sketch on phones (13 Oct 2026): too much bulk. */
  #site-footer { padding-bottom: 32px; background-image: none; }
  /* Room on the right for the WhatsApp button, so it never covers Terms and Privacy (14 Oct 2026). */
  .footer-inner { padding-right: 64px; }
}

.footer-logo {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

#site-footer a { color: #CFE0EA; }
#site-footer a:hover { color: #fff; text-decoration: underline; }
#site-footer p + p { margin-top: 12px; }
.footer-logo { margin-bottom: 14px; }

/* ── TYPE ── */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
/* Brand refresh: a hand-drawn sun stroke under a few words of a page headline
   (sun is decoration only). Section headings keep their words plain, so the
   sun appears only once or twice per screen. */
h1 em {
  font-style: normal;
  color: inherit;
  background-image: var(--sun-stroke);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.36em;
  padding-bottom: 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; /* one stroke per line if the words wrap */
}
h2 em, h3 em { font-style: normal; color: inherit; }

.page-title { font-size: 28px; margin: 28px 0 8px; }
.lead { color: var(--ink-mid); font-weight: 300; margin-bottom: 20px; font-size: 17px; }

.section-title { font-size: 20px; margin-bottom: 14px; }
.muted { color: var(--ink-light); font-size: 14px; }

/* ── INITIALS PHOTO ── */
.avatar {
  border-radius: 50%;
  background: var(--sand-dark);
  color: var(--soft-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 500;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.avatar-md { width: 52px; height: 52px; font-size: 19px; }
.avatar-lg { width: 84px; height: 84px; font-size: 30px; box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px var(--sun); } /* sun ring: brand moment */

/* ── LABELS ── */
.label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.4;
}

/* Employer confirmed: solid sage (the main check) */
.label-reference { color: var(--fynbos-ink); background: var(--sage-light); border: 1.5px solid var(--sage-light); }  /* soft (4 Oct 2026) */

/* Not yet: quiet grey outline, no tick */
.label-none { color: var(--grey); border: 1.5px dashed var(--grey); background: transparent; opacity: 0.8; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-mid);
  margin: 0 6px 6px 0;
}

/* ── AVAILABILITY ── */
.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; padding: 4px 11px; border-radius: 999px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.status-now { background: var(--sage-light); color: var(--fynbos-ink); }
.status-from, .status-open { background: var(--white); color: var(--fynbos-ink); box-shadow: inset 0 0 0 1.2px var(--fynbos-line); }
.status-from .status-dot, .status-open .status-dot { background: transparent; box-shadow: inset 0 0 0 1.6px currentColor; }
.status-not-looking { background: var(--grey-light); color: var(--grey); }
.status-stale { background: var(--grey-light); color: var(--grey); }
.status-stale .status-dot { background: transparent; box-shadow: inset 0 0 0 1.6px currentColor; }
.status-detail { font-size: 13px; color: var(--ink-light); margin-top: 5px; }

/* ── CARDS ── */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}

/* ── BUTTONS ── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }

.btn-outline { background: var(--white); color: var(--ink); border-color: var(--border-strong); }
/* Hover only on devices with a mouse - on phones a tapped button kept the hover colour. Tappable = deep sea. */
@media (hover: hover) { .btn-outline:hover { border-color: var(--accent); color: var(--accent); } }

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* ── FAMILY VIEW ── */
.family-hero { background: var(--sand); padding: 4px 0 20px; }
.family-hero .lead { max-width: 620px; }
.family-hero > .wrap { width: 100%; }   /* the hero is a flex row: without this the search card shrank to its words and jumped when the role changed (21 Oct 2026) */

.filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.filter { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-mid); font-weight: 500; }
.filter select {
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
}


.results { padding-top: 20px; }
.results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#count { color: var(--ink-mid); font-size: 14px; }

.card-grid { display: grid; gap: 14px; }
.card-grid .card { margin: 0; }

.worker-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.worker-card:hover { border-color: var(--accent); box-shadow: 0 14px 34px -18px rgba(20,36,47,0.3); }

.wc-top { display: flex; gap: 12px; align-items: flex-start; }
.wc-who { flex: 1; min-width: 0; }
.wc-name { font-family: var(--font-heading); font-size: 19px; line-height: 1.2; }
.wc-roles { font-size: 14px; color: var(--ink-mid); }
.wc-open { font-size: 13px; color: var(--ink-light); font-style: italic; }

.wc-areas { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-mid); }
.wc-areas svg { color: var(--ink-light); flex-shrink: 0; }

.wc-status .status { font-size: 14px; font-weight: 400; }
.wc-checked { font-size: 12px; color: var(--ink-light); margin-top: -4px; }
.wc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

.wc-bio {
  font-size: 14px;
  color: var(--ink-mid);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.worker-card.is-stale { background: var(--sand); border-color: transparent; }

.stale-note {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--grey);
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

.empty { grid-column: 1 / -1; text-align: center; padding: 40px 16px; background: var(--sand); border-radius: 14px; }

/* ── PROFILE ── */
.profile-hero { background: var(--sand); padding: 24px 0; }
.hero-inner { display: flex; gap: 16px; align-items: flex-start; position: relative; }
.hero-text { flex: 1; min-width: 0; }

.profile-name { font-size: 28px; }
.profile-roles { color: var(--ink-mid); font-size: 17px; }
.profile-open { color: var(--ink-light); font-size: 14px; font-style: italic; }
.profile-areas { color: var(--ink-mid); font-size: 14px; margin-top: 2px; }
.hero-status { margin-top: 12px; }

.hero-contact {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none;
}

.profile-grid { padding-top: 20px; }
.block { margin: 28px 0; }
.section-title em { font-style: normal; color: inherit; }
.bio { color: var(--ink-mid); white-space: pre-line; }

/* Details */
.details { display: grid; gap: 0; padding-top: 6px; padding-bottom: 6px; }
.detail { padding: 12px 0; border-top: 1px solid var(--line); }
.detail:first-child { border-top: none; }
.detail .muted { margin-top: 4px; }
.detail .chip { margin: 0 6px 6px 0; }
.seen-tick { color: var(--sage); display: inline-flex; vertical-align: -1px; }
.seen-tick svg { width: 13px; height: 13px; }
.detail > div { font-size: 15px; }
.detail-note { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; color: var(--sage); text-transform: none; letter-spacing: 0; }
.small { font-size: 13px; }
.muted svg { vertical-align: -1px; color: var(--sage); }
.detail h3 { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }

.days { display: flex; gap: 6px; flex-wrap: wrap; }
.day {
  font-size: 13px;
  width: 42px;
  text-align: center;
  padding: 6px 0;
  border-radius: 8px;
  color: var(--ink-light);
  border: 1px dashed var(--line);
}
.day-on { background: var(--sand-dark); color: var(--ink); border: 1px solid var(--sand-dark); font-weight: 500; }

/* Past employers: the three layers (3 Oct 2026) */
.layer { margin-bottom: 14px; }
.layer h3 { font-size: 17px; }
.layer-note { font-size: 13px; color: var(--ink-light); margin-top: 2px; }
.basics { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.basics li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.35; }
.basic-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--sage-light); color: var(--sage); display: grid; place-items: center; flex-shrink: 0; }
.basic-of { font-size: 13px; color: var(--ink-light); white-space: nowrap; }
.traits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.trait { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; padding: 5px 12px; border-radius: 999px; background: var(--sand-dark); color: var(--ink); }
.trait svg { color: var(--ink-mid); flex-shrink: 0; }
.trait-n { color: var(--ink-light); font-weight: 400; }
.trait-sm { font-size: 12.5px; padding: 3px 10px; gap: 5px; }
.wc-strengths { display: flex; flex-wrap: wrap; gap: 6px; }
.tags, .wc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
/* Trainer confirmed: outlined fynbos, so it never looks like "Employer confirmed" (solid) */
.label-training { color: var(--sage); background: var(--white); border: 1.5px solid var(--sage); }
.how-did-it-go { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; }

.reference h3 { font-size: 17px; }
.ref-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.ref-meta { font-size: 14px; color: var(--ink-mid); }
.ref-quote {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 16px;
  color: var(--ink);
  border-left: 3px solid var(--sun);
  padding-left: 12px;
  margin: 14px 0 0;
}
.ref-label { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ref-when { font-size: 12px; color: var(--ink-light); }
.ref-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ref-compact .ref-tags { margin-top: 10px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--sand);
  color: var(--ink-mid);
}


/* Key facts */
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 20px;
}
.fact { background: var(--white); padding: 10px 14px; }
.fact dt { font-size: 12px; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.05em; }
.fact dd { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fact-num { font-weight: 500; }

/* Checks (right-hand column) */
.side-title { font-size: 17px; margin-bottom: 12px; }
.checks ul { list-style: none; display: grid; gap: 8px; }
.checks li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.checks li svg { color: var(--sage); width: 14px; height: 14px; flex-shrink: 0; }
.checks details { margin-top: 14px; font-size: 13px; color: var(--ink-mid); }
.checks summary { cursor: pointer; color: var(--accent); }
.checks details p { margin-top: 8px; }

/* Contact */
.contact { background: var(--sand); border-color: transparent; }
.contact p { margin-bottom: 14px; color: var(--ink-mid); }
.contact .price { margin-bottom: 4px; }
.contact .price strong { font-family: var(--font-heading); font-size: 28px; font-weight: 500; color: var(--ink); }
.contact .small { margin: 12px 0 0; font-size: 13px; }

.share { margin: 12px 0 14px; }

/* Pretend checkout (Step 4) */
.test-note {
  font-size: 12px;
  font-weight: 500;
  background: var(--ink);
  color: var(--sand) !important;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 14px !important;
}
.summary { display: grid; gap: 8px; margin-bottom: 14px; font-size: 15px; }
.summary div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.summary dt { color: var(--ink-mid); }
.summary dd { font-weight: 500; text-align: right; }
.contact .back { display: block; margin: 12px auto 0; }
.paying { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0; color: var(--ink-mid); }
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--sand-dark);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.phone { font-family: var(--font-heading); font-size: 28px; color: var(--ink) !important; margin-bottom: 14px !important; letter-spacing: 0.02em; }
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── REFEREE FORM ── */
.referee .page-title { margin-top: 16px; }
.ref-intro { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.ref-intro .page-title { margin: 0; }
.ref-intro + .lead { margin-top: 10px; }
.ref-intro .muted { font-size: 13px; }
.ref-for { font-family: var(--font-heading); font-size: 19px; line-height: 1.2; }

.hp { position: absolute; left: -9999px; }

.q-card { padding: 20px 18px; }
.q-title { font-size: 19px; margin-bottom: 4px; }
.q { padding: 14px 0; }
.q-label { display: block; font-weight: 500; margin-bottom: 8px; line-height: 1.4; }
.q-help { font-size: 13px; color: var(--ink-light); margin: -4px 0 8px; }
.q-title + .q-help { margin-top: 0; }

.q input[type=text], .q input[type=tel], .q input[type=email], .q input[type=password], .q input[type=date], .q textarea, .q select, .years select, .phone-row select, .low-note,
.d-field input, .d-field select {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px stops phones zooming in */
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
}
.q textarea { resize: vertical; }
/* The date box looks like our other boxes (27 Oct 2026); the calendar that opens is the phone's own. */
.q input[type=date] { max-width: 240px; min-height: 44px; }
.counter { text-align: right; font-size: 12px; color: var(--ink-light); margin-top: 4px; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.together-label { margin-top: 18px; }   /* the reference form's second question under the ages (29 Oct 2026) */
.choice {
  font: inherit;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 24px;
  border: 1.5px solid var(--border-strong);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.choice[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--white); }

.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.name-row .q-label { margin-bottom: 6px; }
.name-row .q-error { grid-column: 1 / -1; }
.name-row.surname-only { grid-template-columns: 1fr; }
.phone-row { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 8px; }
.years { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.when-label { font-size: 13px; color: var(--ink-mid); margin: 4px 0 4px; }
.years + .when-label { margin-top: 10px; }
.years select:disabled { opacity: 0.4; }
.years label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-mid); }

.rate-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.star-btns { display: flex; gap: 2px; }
.star-btn { background: none; border: none; padding: 3px; cursor: pointer; line-height: 0; }
.star-btn svg { fill: var(--sand-dark); transition: fill 0.1s; }
.star-btn.on svg { fill: var(--gold); }
.na-btn {
  font: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--ink-mid);
  cursor: pointer;
}
.na-btn[aria-pressed=true] { background: var(--ink-mid); border-color: var(--ink-mid); color: var(--white); }
.limit-note { color: var(--error); font-size: 14px; font-weight: 600; margin-top: 8px; }
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--sand); border-radius: 10px; padding: 3px; margin-top: 6px; }
.seg3 button { font: inherit; font-size: 14px; font-weight: 600; border: 0; border-radius: 8px; padding: 9px 0; background: transparent; color: var(--ink-mid); cursor: pointer; }
.seg3 button[aria-pressed="true"] { background: var(--white); color: var(--accent); box-shadow: 0 1px 3px rgba(20,36,47,.15); }
.seg3 button:focus-visible { outline: 2px solid var(--sun); outline-offset: 1px; }
.rate-word { font-size: 13px; color: var(--ink-mid); min-height: 20px; margin-top: 2px; }
.low-note { margin-top: 6px; font-size: 15px !important; }
.q-hint { display: block; font-weight: 400; font-size: 13px; color: var(--ink-light); }
.step-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; }
.step-head .part-label { margin: 0 0 8px; }
/* "Other work" under the job question (27 Oct 2026): opens the kinds of work she hasn't listed. */
.role-more { margin: 8px 0 0; }
#step-1 > .btn { margin-top: 6px; }
.email-suggest { font-size: 13px; margin-top: 6px; color: var(--ink-mid); }
.email-suggest button { font: inherit; color: var(--accent); background: none; border: none; text-decoration: underline; cursor: pointer; padding: 0; }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-mid); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--sage); }
.consent.tick-line { margin-top: 12px; }   /* caregiver reference: "They have passed away" under who they cared for (27 Oct 2026) */
.consent.tick-line[hidden] { display: none; }
#passed-away-note { margin: 6px 0 0 30px; }   /* the condolence line sits under the tick's words (27 Oct 2026) */
.cared-who { margin-top: 14px; }
.consent-group .consent + .q-error + .consent, .consent-group .consent + .consent { margin-top: 12px; }

.q-error { display: none; color: var(--error); font-size: 13px; font-weight: 500; margin-top: 6px; }
.has-error .q-error { display: block; }
.has-error input[type=text], .has-error input[type=tel], .has-error input[type=email], .has-error input[type=password], .has-error input[type=date], .has-error select, .has-error textarea { border-color: var(--error); }

.referee .btn-primary { margin-top: 6px; }
.btn-primary[disabled] { opacity: 0.6; cursor: wait; }
.form-error { color: var(--error); font-size: 14px; font-weight: 500; margin-top: 10px; }

.part-label { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 24px 0 8px; }
.honesty {
  background: var(--sand);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink-mid);
  margin-bottom: 20px;
}
.private-card { background: var(--sand-dark); border-color: #CFDEE7; }   /* darker, so "Just between us" stands apart on the tinted page */
.private-card .choice:not([aria-pressed=true]), .private-card textarea { background: var(--white); }

/* ── ADMIN PANEL ── */
.admin .page-title { margin-top: 20px; }
.admin-note { background: var(--sand); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }
.code-input { font-size: 28px !important; letter-spacing: 10px; text-align: center; font-weight: 700; }
.code-paste { margin-top: 8px; }
.a-head-links { display: flex; gap: 16px; align-items: center; }
.a-password-form, #a-password-box > .card { margin-bottom: 18px; }
/* Two-factor set-up (29 Oct 2026): the QR code and the key to type in instead */
#a-password-box h2 { margin-bottom: 8px; }
.tf-qr { display: block; width: 180px; height: 180px; margin: 6px 0 10px; background: #fff; }
.tf-key { font-family: ui-monospace, Menlo, monospace; font-size: 14px; letter-spacing: .04em; overflow-wrap: anywhere; background: var(--mist); border-radius: 8px; padding: 8px 10px; }
.note-box { background: var(--sun-soft); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; margin: 6px 0 12px; }
.note-box strong { display: block; font-size: 15.5px; margin-bottom: 2px; }
.cant-box .q-label { display: block; margin: 10px 0 4px; font-size: 14.5px; }   /* the helper's "can't do it" box (23 Oct 2026) */
.cant-box textarea { width: 100%; min-height: 64px; margin-bottom: 10px; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.note-box.note-warn { background: #FDF0E3; }   /* soft orange: worth knowing, not an error (19 Oct 2026) */
.phone-row + .q-help { margin-top: 6px; }
.ok-box { background: var(--fynbos-soft, #E4EEE2); color: var(--ink); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 600; margin: 6px 0 12px; }
.style-pair { padding: 14px 0; }
.style-pair:first-child { padding-top: 4px; }
.style-ends { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.style-ends span:last-child { text-align: right; }
.style-dots { display: flex; justify-content: space-between; align-items: center; position: relative; margin: 12px 4px 0; }
.style-dots::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; background: var(--line); }
.style-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: var(--white); position: relative; cursor: pointer; padding: 0; }
.style-dot:nth-child(2), .style-dot:nth-child(3) { width: 22px; height: 22px; }
.style-dot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--sand-dark); }
.style-dot:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.style-mid { text-align: center; font-size: 12px; color: var(--ink-light); margin-top: 4px; }
.a-wa { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.a-delete { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.g-group { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.a-check { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; }
.a-danger { color: var(--error) !important; font-size: 14px; }
.a-head { display: flex; justify-content: space-between; align-items: baseline; }
.a-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 12px 0 8px; }
.a-tiles div { background: var(--sand); border-radius: 10px; padding: 10px 12px; }
.a-tiles dt { font-size: 12px; color: var(--ink-mid); line-height: 1.3; }
.a-tiles dd { font-family: var(--font-heading); font-size: 26px; margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.a-sub { font-size: 16px; margin: 18px 0 8px; font-family: var(--font-body); font-weight: 600; }
.a-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.a-name { font-family: var(--font-heading); font-size: 18px; font-weight: 500; }
.a-sample { font-size: 11px; color: var(--ink-light); border: 1px dashed var(--ink-light); border-radius: 10px; padding: 0 6px; }
.a-meta { font-size: 13px; color: var(--ink-mid); margin-top: 2px; }
.a-hint { font-size: 13px; color: var(--ink-light); margin-top: 6px; }
.a-confirmed { font-size: 14px; color: var(--ink-mid); }
.a-due { color: var(--accent); font-weight: 500; }
.a-overdue { color: var(--error); font-weight: 600; }
.a-pill { font-size: 12px; font-weight: 600; border-radius: 20px; padding: 2px 10px; white-space: nowrap; }
.a-live, .a-approved { background: var(--sage); color: var(--white); }
.a-hidden, .a-declined { background: var(--grey-light); color: var(--grey); }
.a-pending { background: var(--sand-dark); color: var(--ink); }
/* Helper stages (4 Oct 2026) */
.a-stage-new { background: var(--sand-dark); color: var(--ink); }
/* Collecting references in sun yellow: an admin-only exception to the sun rule (13 Oct 2026). */
.a-stage-collecting { background: var(--sun-soft); color: #7A5410; border: 1px solid var(--sun); }
.a-stage-ready { background: var(--white); color: var(--sage); border: 1.5px solid var(--sage); }
.a-stage-live { background: var(--sage); color: var(--white); }
.a-stage-paused { background: var(--grey-light); color: var(--grey); }
.a-ref-flag { border-left: 3px solid var(--error); padding-left: 10px; }
.a-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.a-actions .btn { width: auto; flex: 1 1 140px; padding: 10px 14px; font-size: 14px; }
.a-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.a-links { font-size: 14px; margin-top: 10px; }
.a-links .link-btn { font-size: 14px; }
.a-refs { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.a-refs summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.a-ref { padding: 10px 0; border-bottom: 1px solid var(--line); }
.a-ref:last-child { border-bottom: none; }
.a-quote { font-family: var(--font-heading); font-style: italic; font-size: 15px; margin-top: 6px; }
/* The quoted line's star (28 Oct 2026): deep sea, as anything tappable */
.a-hl { background: none; border: 0; padding: 0 3px 0 0; font: inherit; font-style: normal; color: var(--accent); cursor: pointer; opacity: .55; }
.a-hl:hover, .a-hl.on { opacity: 1; }
.a-answers { margin: 8px 0 0; display: grid; gap: 4px; font-size: 13px; }
.a-answers div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.a-answers dt { color: var(--ink-light); }
.a-answers dd { margin: 0; color: var(--ink); }
.a-answers dd.a-note { font-weight: 600; }
.a-area { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-mid); margin-top: 10px; }
.a-area select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); max-width: 100%; }
.a-style { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.a-style li { display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.a-style li span { color: var(--ink-mid); }
.a-quietnote { color: var(--ink-light); font-style: italic; }
.a-private { margin: 8px 0 0; padding: 8px 12px 8px 26px; background: var(--sand); border-radius: 8px; font-size: 13px; color: var(--ink-mid); }
.a-filter { margin-bottom: 12px; }
.table-scroll { overflow-x: auto; }
.a-report { width: 100%; border-collapse: collapse; font-size: 14px; }
.a-report th, .a-report td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.a-report th { font-size: 12px; color: var(--ink-mid); font-weight: 600; }
.a-report .num { text-align: right; font-variant-numeric: tabular-nums; }
.a-report tfoot td { font-weight: 600; border-bottom: none; }

/* Admin: tabs and compact rows */
.a-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 8px 0 16px; }
.a-tabs button {
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-mid);
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 10px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.a-tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--accent); }
.a-count { font-size: 12px; background: var(--sand-dark); color: var(--ink-mid); border-radius: 10px; padding: 0 7px; }
.a-count-todo { background: var(--accent); color: #fff; }
.a-group { margin-bottom: 24px; }
.a-group-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.a-group-title span { background: var(--sand-dark); color: var(--ink); border-radius: 10px; padding: 0 8px; letter-spacing: 0; }
.a-group-help { margin: -4px 0 8px; }
.a-empty { background: var(--sand); border-radius: 12px; padding: 24px 16px; text-align: center; color: var(--ink-mid); }
.a-item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.a-item-top { display: flex; gap: 12px; align-items: center; }
.a-avatar { width: 44px; height: 44px; font-size: 16px; }
.a-who { flex: 1; min-width: 0; }
.a-who .a-meta { margin-top: 0; }
/* Phones (22 Oct 2026): the stage pill gets its own line under the name, so the name and roles aren't squeezed
   into a narrow column and the eye button doesn't sit on the surname. */
@media (max-width: 640px) {
  .a-item-top { flex-wrap: wrap; row-gap: 6px; }
  .a-item-top::after { content: ''; flex-basis: 100%; order: 4; }
  .a-item-top > .a-pill { order: 5; margin-left: 56px; }
  .a-panel .a-item-top > .a-pill { margin-left: 48px; }   /* the slimmer 36px photos in admin lists */
}
.a-avail { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.a-avail .a-confirmed { font-size: 13px; }
.a-mini { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--white); border: 1.5px solid var(--ink); border-radius: 10px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.a-mini:hover { background: var(--ink); color: var(--white); }
.a-more { margin-top: 8px; }
.a-more summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.a-sub-small { font-size: 13px; font-weight: 600; margin-top: 12px; }
.a-tools { display: grid; gap: 10px; margin-bottom: 8px; }
.a-tools input[type=search] { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--white); color: var(--ink); width: 100%; }
.a-more-btn { margin-top: 6px; }

/* ── BRAND REFRESH: landscape band and labels ── */
.coast { display: block; width: 100%; height: 72px; }
.family-hero, .profile-hero { padding-bottom: 0 !important; }
.family-hero .filters { margin-bottom: 20px; }
.hero-grid { padding-bottom: 20px; }
.brand-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 24px; }
.brand-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); }
.brand-tag + .page-title { margin-top: 10px; }

/* Privacy notice */
.privacy .block p + p { margin-top: 10px; }
.privacy-sub { font-size: 16px; margin: 16px 0 6px; }
.privacy-list { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-mid); }
.privacy-list strong { color: var(--ink); }

/* Helper sign-up */
.signup .page-title { margin-top: 10px; }
@media (max-width: 759px) { .signup .hs-intro .page-title { margin-top: 28px; } }   /* phones: room under the top bar, like the household sign-up (21 Oct 2026) */
.step-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 20px 0 4px; }
.step-bar span { height: 5px; border-radius: 3px; background: var(--line); }
.step-bar .done { background: var(--accent); opacity: 0.45; }
.step-bar .now { background: var(--accent); }
.part-label-top { margin-top: 20px; }   /* no step bar above it yet (28 Oct 2026) */
.step-actions { display: flex; gap: 10px; margin-top: 6px; }
.step-actions .btn { flex: 1; }
.upload { margin-top: 10px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.upload-label { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.upload-label-gap { margin-top: 14px; }   /* "Another certificate": its photo under its name (27 Oct 2026) */
.upload-btn { cursor: pointer; position: relative; }
/* The file box stays in the page (not display:none) - some Samsung phones ignore taps on a hidden one. */
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload-done { font-size: 13px; color: var(--fynbos-ink); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.upload.has-error { border-color: var(--error); }
.upload .q-error { margin-top: 8px; }
.photo-preview { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin: 0 auto 12px; box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px var(--sun); }
.photo-preview[hidden] { display: none; }
/* Her photo at the top of the helper's Profile tab, with a camera button (22 Oct 2026) */
.my-photo-card { text-align: center; }
.my-photo { position: relative; display: inline-block; margin: 6px auto 16px; text-decoration: none; }
.my-photo .avatar-lg { margin: 0; }
.my-photo-cam { position: absolute; right: -4px; bottom: -4px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--white); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--white); }
.my-photo-link { display: block; font-weight: 600; }
.my-photo-see { margin-top: 16px; }   /* the empty ring showed before a photo was picked (22 Oct 2026) */
.thanks-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px 24px; margin-top: 24px; }
.thanks-card .page-title { margin-top: 0; }
.next-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-mid); }

/* Admin: reviewing a sign-up */
.a-photo { object-fit: cover; }
.a-signup { margin-top: 10px; display: grid; gap: 6px; }
.a-photo-big { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; }
.a-quiet { font-size: 13px; background: var(--sand-dark); color: var(--soft-ink); border-radius: 8px; padding: 8px 10px; }
.a-facts { display: grid; gap: 4px; margin: 0; font-size: 13px; }
.a-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.a-facts dt { color: var(--ink-light); }
.a-facts dd { margin: 0; color: var(--ink); }
/* About split by kind of work (26 Oct 2026): General, then a heading per kind; a kind she no longer does is greyed. */
.a-kind { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.a-kind-h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.a-kind-first { margin-top: 12px; }
.a-facts + .a-kind-h { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.a-kind-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sand-dark); color: var(--accent); display: grid; place-items: center; font-style: normal; }
.a-kind.is-old .a-kind-h, .a-kind.is-old .a-facts { opacity: .55; }
.a-kind.is-old .a-hint { margin: 0 0 6px; }
.a-quals, .a-words { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; }
.a-cert-match select { width: auto; max-width: 100%; display: inline-block; padding: 2px 6px; font-size: 13px; min-height: 0; }   /* 29 Oct 2026: Switch to ours */
.a-ok { color: var(--fynbos-ink); font-weight: 600; }
.a-remove-cert { color: var(--error); }   /* quiet, red: it deletes (20 Oct 2026) */
.a-bio { width: 100%; font: inherit; font-size: 15px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 10px; }

.a-flag { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; background: var(--error-soft); color: var(--error); border-radius: 8px; padding: 8px 10px; }
.a-warn-text { color: var(--error); }
.a-new-role { font-size: 11px; font-weight: 600; color: var(--error); background: var(--error-soft); border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
/* Gem signals (21 Oct 2026): admin only. A small gem by the name, the order switch, and the detail folded in About. */
.a-gem { font-size: 13px; cursor: help; }
.a-count-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.a-sort { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--white); }
.a-sort button { border: 0; background: none; font: inherit; font-size: 12px; color: var(--ink-mid); padding: 4px 10px; cursor: pointer; }
.a-sort button[aria-pressed="true"] { background: var(--accent); color: var(--white); font-weight: 600; }
.a-gem-box { border: 1px solid var(--line); border-radius: 10px; background: var(--mist); margin: 0 0 12px; }
.a-gem-box summary { cursor: pointer; padding: 8px 12px; font-size: 14px; font-weight: 600; }
.a-gem-box ul { list-style: none; margin: 0; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.a-gem-box li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--ink-mid); }
.a-gem-box li b { color: var(--ink); font-weight: 600; }
.a-gem-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--grey); }
.a-gem-dot.is-good { background: var(--sage); border-color: var(--sage); }
.a-gem-dot.is-look { background: #C9752A; border-color: #C9752A; }   /* soft orange: worth a look, not an error */
.quick-days { margin-bottom: 8px; }
.choice.mini { font-size: 13px; padding: 6px 12px; border-style: dashed; }

/* ── WIDER SCREENS ── */
@media (min-width: 600px) {
  .filters { grid-template-columns: repeat(3, 1fr); }
  .card-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 860px) {
  .wrap, .nav-inner { padding-left: 32px; padding-right: 32px; }

  .page-title { font-size: 40px; margin-top: 40px; }
  .family-hero { padding-bottom: 32px; }

  .profile-hero { padding: 40px 0; }
  .hero-inner { gap: 28px; align-items: center; }
  .avatar-lg { width: 132px; height: 132px; font-size: 46px; }
  .coast { height: 96px; }
  .profile-name { font-size: 40px; }
  .hero-contact { display: none; }

  .profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: start;
    padding-top: 32px;
  }
  /* The side column runs the full height; only the booking box stays in view (10 Oct 2026). */
  .profile-side { align-self: stretch; }
  .detail { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; }
  .detail h3 { margin-bottom: 0; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
  .facts { margin-top: 0; }
}

@media (min-width: 1000px) {
  .filters { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .card-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Profile: header C and section cards (4 Oct 2026) ──
   Centred header with a strip of key facts that wraps on phones. Below it,
   each section is a white card on the mist page, so sections are easy to tell apart. */
.back-results { display: inline-block; margin: 0 0 10px; font-size: 14px; color: var(--accent); text-decoration: none; }
.back-results:hover { text-decoration: underline; }
.hero-c { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 20px; }
.hero-c .avatar-lg { margin-bottom: 12px; }
.hero-c .profile-roles { margin-top: 2px; }
.hero-c .hero-status { display: flex; flex-direction: column; align-items: center; }
.hero-facts { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 14px; color: var(--ink-mid); max-width: 640px; }
.hero-facts li { white-space: nowrap; }
.hero-facts b { color: var(--ink); font-weight: 600; }
.hero-c .hero-contact { margin-top: 16px; }

#profile { background: var(--sand); }
.profile-main > .block { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 0 0 16px; }
.profile-main > .block .card { background: var(--sand); border-color: transparent; }
.profile-main > .block > .card.details { background: transparent; padding: 0; margin: 0; }
/* The card's own padding is the space at the bottom; the last row adds none (16 Oct 2026). */
.profile-main > .block > .card.details > .detail:last-child { padding-bottom: 0; }
.profile-main > .block > .muted:last-child { margin-bottom: 0; }
.profile-side .contact { background: var(--white); border-color: var(--line); }
.told-us { font-size: 13px; color: var(--ink-light); margin: -6px 0 8px; }
.chip-link { text-decoration: none; color: var(--ink-mid); }
.chip-note { font-size: 12px; color: var(--sage); }
.profile-updated { font-size: 13px; padding: 0 4px 24px; }
@media (min-width: 860px) {
  .hero-c .avatar-lg { width: 112px; height: 112px; font-size: 40px; }
  .profile-main > .block { padding: 22px 24px; }
}

/* ── Profile header (28 Oct 2026) ── centred on phones, lined up left on computers, with
   "Past employers say" beside her details (computers) or straight under the header (phones). */
.hero-v2 .hero-who, .hero-v2 .hero-text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.hero-v2 { padding-bottom: 14px; }
.hero-v2 .avatar-lg { width: 96px; height: 96px; font-size: 34px; margin-bottom: 12px; }   /* phones: 72px got lost under the trust numbers (29 Oct 2026) */
.hero-v2 .profile-roles { font-size: 16px; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; margin: 4px 0 0; font-size: 14px; color: var(--ink-mid); }
.hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.hero-meta .ui-ic { color: var(--ink-light); flex: none; }
.hero-rate { font-size: 14px; color: var(--ink-mid); white-space: nowrap; }
.hero-rate b { color: var(--ink); font-weight: 600; }
.hero-stats { list-style: none; margin: 14px 0 0; padding: 0; display: flex; justify-content: center; }
.hero-stat { display: grid; gap: 1px; align-content: start; padding: 0 14px; border-left: 1px solid var(--line); text-align: center; }
.hero-stat:first-child { border-left: 0; }
.hero-stat b { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.hero-stat b.stat-stars { color: var(--gold, #D9A030); }
.hero-stat b.stat-good { color: var(--fynbos-ink); }
.hero-stat > span { font-size: 12.5px; color: var(--ink-mid); line-height: 1.3; }
@media (max-width: 360px) { .hero-stat { padding: 0 9px; } }
.hero-voice { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; text-align: left; min-width: 0; }
.book-band > .hero-voice, .profile-main > .hero-voice { margin-bottom: 16px; }
/* A window made narrow after the page opened keeps the card in the header: give it room (28 Oct 2026). */
.hero-v2 > .hero-voice { margin-top: 18px; align-self: stretch; }
.voice-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.voice-head .sub-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); }
.voice-head a { font-size: 13.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.voice-quote { margin: 0; border-left: 3px solid var(--sun); padding: 1px 0 1px 12px; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.voice-quote span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-light); }
.voice-traits { margin: 0; }
@media (min-width: 860px) {
  .hero-v2 { flex-direction: row; align-items: center; text-align: left; gap: 44px; }
  .hero-v2 .hero-who { flex-direction: row; gap: 28px; flex: 0 1 auto; }
  .hero-v2 .avatar-lg { width: 120px; height: 120px; font-size: 40px; margin: 0 0 0 6px; flex: none; }
  .hero-v2 .profile-name { font-size: 36px; }
  .hero-v2 .hero-text { align-items: flex-start; }
  .hero-v2 .hero-meta, .hero-v2 .hero-status-row, .hero-v2 .hero-stats { justify-content: flex-start; }
  .hero-v2 .hero-stat { text-align: left; }
  .hero-v2 .hero-stat:first-child { padding-left: 0; }
  .hero-v2 .hero-voice { flex: 1 1 320px; padding: 16px 18px; margin-top: 0; align-self: center; }
}

/* ── Family account (4 Oct 2026) ── */
.acc-tabs { display: flex; gap: 6px; margin: 8px 0 20px; flex-wrap: wrap; }
.acc-tabs a { text-decoration: none; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-mid); }
.acc-tabs a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--white); }
.acc-card h2 { font-size: 18px; margin: 0; }
.acc-card p { margin: 8px 0 12px; color: var(--ink-mid); }
.acc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.acc-person { display: flex; gap: 12px; align-items: center; }
.acc-person p { margin: 2px 0 0; }
.acc-links { font-size: 14px; }
.acc-danger h2 { font-size: 17px; color: var(--error); }

/* Delight moments (4 Oct 2026): rare, celebratory, allowed outside the brand colours. */
.delight { position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(135deg, #FDF3DA, #E8F1E3); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; animation: delight-in .5s ease-out; }
.delight::after { content: "\2726 \2727 \2726"; position: absolute; right: 12px; top: 8px; color: #EDB24A; font-size: 13px; letter-spacing: 4px; }
.delight-ic { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.7); display: grid; place-items: center; font-size: 24px; flex-shrink: 0; }
.delight strong { display: block; color: var(--ink); padding-right: 40px; }
.delight p { margin: 4px 0 0; font-size: 14px; color: var(--ink-mid); }
@keyframes delight-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .delight { animation: none; } }

.gate { grid-column: 1 / -1; max-width: 560px; width: 100%; justify-self: center; margin: 8px auto 32px; text-align: center; padding: 28px 22px; }
.gate h2 { font-size: 22px; margin-bottom: 8px; }
.gate p { color: var(--ink-mid); margin-bottom: 16px; }
.gate .small { margin: 12px 0 0; }

.wc-fit { font-size: 13px; color: var(--ink-mid); white-space: nowrap; }
.fit .layer-note a, .fit .small a { font-weight: 600; }
.fit-pair { padding: 14px 0; }
.fit-dontmind { margin-top: 8px; font-size: 13px; }
.trait-match { background: var(--sage-light); }
.trait-match svg { color: var(--sage); }

/* Helper page (4 Oct 2026) */
.stack-btns { display: grid; gap: 8px; margin: 10px 0; }
.warn-box { background: var(--error-soft); color: var(--error); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.warn-box strong { display: block; }
/* Calendar close to (or past) the 2-week cut-off (14 Oct 2026): a red edge and one red line. */
.acc-card:has(.cal-stale) { border: 1.5px solid var(--error); }
.cal-left { color: var(--error); font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.delight-big { margin: 0 0 14px; }
.delight-big .big-n { font-size: 26px; font-weight: 700; margin-right: 4px; }
.who-choices { display: grid; gap: 10px; margin-bottom: 14px; }
.who-choice { display: grid; gap: 2px; text-align: left; padding: 14px 16px; }
.who-choice span { font-size: 13px; color: var(--ink-mid); font-weight: 400; }
#start-date { margin-top: 10px; }
.ref-dates { font-size: 13px; color: var(--ink-light); }
.hired-ref .btn { margin-top: 6px; }

/* Saved helpers: the heart (4 Oct 2026). Deep sea, because it's something you tap. */
.wc-wrap { position: relative; display: flex; }
.wc-wrap > .worker-card { flex: 1; }
.wc-wrap > .heart { position: absolute; top: 12px; right: 12px; z-index: 1; }
.heart { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); display: grid; place-items: center; cursor: pointer; padding: 0; color: var(--accent); }
.heart svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.heart[aria-pressed="true"] svg { fill: currentColor; }
.heart:hover { border-color: var(--accent); }
.wc-top { padding-right: 44px; }
.hero-save { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--ink-mid); }
.fit-top:not(:empty) { margin-bottom: 16px; }
.section-title .count { font-weight: 500; color: var(--ink-light); font-size: 0.8em; }
.logged-in { display: flex; gap: 8px; align-items: flex-start; background: var(--sage-light); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 8px; }
.logged-in svg { color: var(--sage); margin-top: 4px; flex-shrink: 0; }
.saved-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.saved-list a { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); }
.saved-list a > span { display: grid; }
.saved-list .muted { font-size: 13px; }
.avatar-sm { width: 36px; height: 36px; font-size: 13px; }

/* Hearts are pink-red: an exception to the brand colours (4 Oct 2026). */
.heart { color: #E0457B; }
.heart:hover { border-color: #E0457B; }
.side-actions { display: grid; gap: 10px; margin: 12px 0 14px; }
.side-actions .share { margin: 0; }
.side-actions .hero-save { margin: 0; justify-content: center; border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: var(--white); }
/* Save matches Copy link, so it doesn't look switched off; the whole box is tappable (16 Oct 2026). */
.side-actions .hero-save { border: 1.5px solid var(--border-strong); border-radius: 10px; color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.side-actions .hero-save .heart { border: 0; width: 26px; height: 26px; }
@media (hover: hover) { .side-actions .hero-save:hover { border-color: #E0457B; } }

/* Checks A: a more official "Checked by Hermanus Helpers" (4 Oct 2026). */
.checks { border-top: 3px solid var(--sage); }
.checks-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.checks-head .side-title { margin: 0; }
.checks-seal { width: 26px; height: 26px; border-radius: 50%; background: var(--sage); color: var(--white); display: grid; place-items: center; flex-shrink: 0; }
.checks-seal svg { width: 13px; height: 13px; }
.checks li { align-items: flex-start; }
.checks li svg { margin-top: 5px; }
.checks-foot { border-top: 1px solid var(--line); padding-top: 10px; }
.checks-foot summary { color: var(--ink-light); list-style: none; }
.checks-foot summary::-webkit-details-marker { display: none; }
.checks-foot .how { color: var(--accent); text-decoration: underline; }
.heart svg { width: 16px; height: 16px; }
.wc-top { padding-right: 38px; }
.my-words { color: var(--ink-mid); font-size: 14px; }
.change-note { font-size: 13px; border-radius: 8px; padding: 6px 10px; margin: 4px 0 10px; background: var(--sand); color: var(--ink-mid); }
.change-approved { background: var(--sage-light); color: var(--fynbos-ink); }
.change-sent-back, .change-rejected { background: var(--error-soft); color: var(--error); }
.given-status { margin-left: auto; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.given-status.is-ok { background: var(--sage-light); color: var(--fynbos-ink); }
.given-status.is-wait { background: var(--sand-dark); color: var(--ink-mid); }

/* ── Admin on a computer (4 Oct 2026): list left, chosen helper right ── */
.admin.is-wide { max-width: 1240px; }
.a-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.a-detail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.a-detail-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.a-detail-head > div { flex: 1; min-width: 0; }
.a-item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.a-item-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.a-item-foot .a-avail { margin: 0; flex: 1; }
.a-item-foot > .a-more { flex-basis: 100%; min-width: 0; }   /* 17 Oct 2026: on phones the open panel ran past the card */
.a-mini-btn { width: auto; padding: 7px 14px; font-size: 13px; }
.a-top-actions { margin-top: 0; }
.a-fold { border-top: 1px solid var(--line); padding: 8px 0; }
.a-fold > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); }
.a-fold[open] > summary { margin-bottom: 8px; }
.a-ref-fold > summary { font-weight: 400; font-size: 13.5px; color: var(--ink-mid); }
.a-ref-fold .a-ref { margin-top: 6px; }
.a-edit-flag { background: var(--sand-dark); color: var(--ink); }
/* The pipeline: counts per stage, tap to filter */
.a-pipeline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; }
.a-stage-btn { font: inherit; display: grid; justify-items: start; gap: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); cursor: pointer; text-align: left; }
.a-stage-btn b { font-size: 18px; line-height: 1.2; color: var(--ink); }
.a-stage-btn span { font-size: 12px; color: var(--ink-mid); }
.a-stage-btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* A chosen stage keeps its own colour (14 Oct 2026); only uncoloured ones turn mist. */
.a-stage-btn[aria-pressed="true"]:not([class*="a-sb-"]) { background: var(--sand); }
.a-sb-ready b { color: var(--sage); }
.a-arrow { color: var(--ink-light); font-size: 14px; }
/* Edits to approve */
/* Only what changed (27 Oct 2026): removed words red and struck, added words green */
.a-del { background: var(--error-soft); color: var(--error); text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.a-ins { background: var(--sage-light); color: var(--fynbos-ink); text-decoration: none; border-radius: 3px; padding: 0 2px; }
.a-new { font-size: 14px; margin: 6px 0; }
mark.a-flagged { background: var(--error-soft); color: var(--error); font-weight: 600; border-radius: 4px; padding: 0 3px; }
/* Health words in caregiver references (27 Oct 2026): soft orange, worth a glance, not an error. */
mark.a-health { background: #FDF0E3; color: var(--ink); border-radius: 4px; padding: 0 3px; }
.a-health-note { color: #8A5A1E; }
.a-item-foot { border-top: 1px solid var(--line); padding-top: 10px; }
.a-item-foot .a-avail { border-top: 0; padding-top: 0; }
.a-detail-head .avatar { flex: 0 0 44px; width: 44px; height: 44px; }
.a-pipeline { flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
.a-stage-btn { padding: 5px 10px; flex: 0 0 auto; }
.a-stage-btn b { font-size: 16px; }

/* Admin quick actions as icon buttons (4 Oct 2026) */
.a-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.a-quick-btn { font: inherit; display: grid; justify-items: center; gap: 3px; min-width: 76px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--accent); text-decoration: none; cursor: pointer; }
.a-quick-btn span { font-size: 12px; font-weight: 600; color: var(--ink-mid); }
.a-quick-btn:hover { border-color: var(--accent); background: var(--sand); }
.a-contact-line { margin: 2px 0 10px; }

/* Shorter profile header (8 Oct 2026): availability pill and "Confirmed X days ago" side by side */
.hero-c .hero-status-row { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin-top: 10px; }
.hero-c .hero-status-row .status-detail { margin-top: 0; }

/* Household list (8 Oct 2026): hours only shows for ongoing work; a quiet "employers confirmed" line on cards */
.filter[hidden] { display: none; }
.wc-confirmed { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--fynbos-ink); }
.wc-confirmed svg { color: var(--sage); }
/* Photo tips on the helper sign-up (9 Oct 2026) */
.photo-examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 10px; }
.pe { margin: 0; text-align: center; }
.pe svg { display: block; width: 100%; max-width: 96px; margin: 0 auto; border-radius: 10px; border: 4px solid var(--line); }
.pe-yes svg { border-color: var(--sage); }
.pe-no svg { border-color: var(--error); opacity: .85; }
.pe .pe-wall { fill: var(--sand); }
.pe .pe-sky { fill: var(--sand-dark); }
.pe .pe-ground { fill: var(--hill-back); }
.pe .pe-person { fill: var(--sand-dark); stroke: var(--ink-light); stroke-width: 1.2; }
.pe .pe-dark { fill: var(--ink); }
.pe figcaption { font-size: 12px; line-height: 1.3; margin-top: 6px; color: var(--ink); }
.pe-mark { display: block; font-weight: 700; font-size: 15px; }
.pe-yes .pe-mark { color: var(--sage); }
.pe-no .pe-mark { color: var(--error); }
.photo-check { font-size: 13px; text-align: center; color: var(--ink-light); margin: -4px 0 10px; }

/* Calendar (step 2, 9 Oct 2026): a helper's usual week, morning / afternoon / evening */
.cal { display: grid; gap: 3px; max-width: 420px; }
.cal-row { display: grid; grid-template-columns: 74px repeat(7, minmax(0, 1fr)); gap: 3px; align-items: center; }
.cal-head span { font-size: 12px; font-weight: 600; text-align: center; color: var(--ink-light); }
.cal-part { font-size: 12px; color: var(--ink-light); }
.cal-cell { display: block; height: 22px; border-radius: 5px; background: var(--grey-light); border: 0; padding: 0; font: inherit; }
.cal-ongoing { background: var(--sage); }
.cal-occasional { background: var(--sage-light); box-shadow: inset 0 0 0 1.5px var(--sage); }
.cal-both { background: linear-gradient(135deg, var(--sage) 50%, var(--sage-light) 50%); box-shadow: inset 0 0 0 1.5px var(--sage); }
.cal-taken { background: repeating-linear-gradient(135deg, var(--grey-light) 0 4px, #D5DCE0 4px 8px); }
.cal-stale .cal-cell { filter: grayscale(1); opacity: .45; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--ink-light); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend .cal-cell { display: inline-block; width: 14px; height: 14px; }
.cal-busy { font-size: 13px; margin: 8px 0 0; }
.cal-updated { font-size: 12px; color: var(--ink-light); margin: 4px 0 0; }
/* Soft orange, not clay (16 Oct 2026: clay felt too alarming about the helper). A deliberate palette exception. */
.cal-not-recent { display: flex; gap: 8px; align-items: flex-start; background: #FDF0E3; color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.cal-not-recent svg { color: #C9752A; flex-shrink: 0; margin-top: 1px; }
/* Editing: bigger cells to tap, with a short word in each */
.cal-edit .cal-row { grid-template-columns: 70px repeat(7, minmax(0, 1fr)); }
.cal-edit .cal-cell { height: 40px; font-size: 10px; font-weight: 600; color: var(--ink); cursor: pointer; overflow: hidden; }
.cal-edit .cal-ongoing { color: var(--white); }
.cal-edit .cal-both { color: var(--ink); }
.cal-edit .cal-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-sub { font-size: 16px; margin: 18px 0 4px; }
.cal-busy-list { list-style: none; padding: 0; margin: 6px 0; font-size: 14px; }
.cal-busy-list li { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; }
.cal-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 16px; }
.cal-add input, .cal-add select { flex: 1 1 130px; width: auto; }
@media (max-width: 360px) { .cal-row, .cal-edit .cal-row { grid-template-columns: 58px repeat(7, minmax(0, 1fr)); } .cal-edit .cal-cell { font-size: 8.5px; } }
.cal-key { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; font-size: 13px; }
.cal-key li { display: flex; align-items: center; gap: 8px; }
.cal-key .cal-cell { width: 26px; height: 18px; flex: none; }

/* Referee form: "Safe and private" (9 Oct 2026) */
.safe-box { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--sage); border-radius: 14px; padding: 14px 16px; margin: 4px 0 18px; }
.safe-box h2 { font-size: 16px; margin: 0 0 8px; }
.safe-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.safe-box li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.safe-box li svg { flex: none; margin-top: 3px; color: var(--sage); }

/* "When <name> is free" on the profile (9 Oct 2026): green = free, nothing else */
.free-card { padding: 0; }
/* The profile calendar's "Tap a day to book it" sits on the heading's line, on the right (22 Oct 2026: less empty space). */
@media (min-width: 560px) {
  .profile-main > .block.cal-block { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .cal-block > .book-cal-title { flex: 1 1 auto; }
  .cal-block > .free-card { display: contents; }
  .cal-block > .free-card > * { flex: 1 1 100%; min-width: 0; }
  .cal-block > .free-card > .mc-hint { flex: 0 0 auto; margin: 0; }
}
.free-part + .free-part { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.free-part h3 { font-size: 15px; margin: 0 0 8px; }
.free-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.free-lines li { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.free-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sage); flex: none; }
.mc { max-width: 380px; }
.mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mc-head strong { font-size: 15px; }
.mc-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--white); color: var(--accent); font-size: 22px; line-height: 1; cursor: pointer; }
.mc-nav:disabled { opacity: .3; cursor: default; }
.mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mc-dow { font-size: 12px; font-weight: 600; text-align: center; color: var(--ink-light); }
.mc-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px 6px; border-radius: 8px; background: var(--sand); min-height: 44px; }
.mc-day b { font-size: 13px; font-weight: 600; }
.mc-blank { background: none; }
.mc-out { background: none; color: var(--ink-light); opacity: .45; }
.mc-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.mc-bars { display: flex; gap: 2px; width: 80%; }
.mc-bars i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.mc-bars i.on { background: var(--sage); }
.mc-bars-key { width: 34px; flex: none; }

/* Calendar, simplified (9 Oct 2026): free / taken / not available; a key beside the month */
.cal-free { background: var(--sage); }
.mc-layout { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; }
.mc-layout .mc { flex: 1 1 300px; }
.mc-side { flex: 0 1 190px; margin-top: 46px; display: grid; gap: 16px; align-content: start; }
.mc-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 13px; color: var(--ink); }
.mc-key li { display: flex; align-items: center; gap: 10px; }
.mc-key-day .mc-day { width: 44px; flex: none; }
.mc-key-day span:last-child { color: var(--ink-light); line-height: 1.35; }
.mc-key-bar { display: inline-block; width: 24px; height: 6px; border-radius: 3px; background: var(--line); flex: none; }
.mc-key-bar.on { background: var(--sage); }
.mc-key-today { display: inline-block; width: 24px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--accent); flex: none; }
.mc-key-note { color: var(--ink-light); line-height: 1.4; }
@media (max-width: 700px) { .mc-side { margin-top: 0; flex-basis: 100%; } .mc-key { grid-template-columns: 1fr 1fr; } .mc-key-day { grid-column: 1 / -1; } }
/* No weekend shading on any calendar (16 Oct 2026: cleaner, like admin's); the S S letters stay a touch darker. */
.mc-wkend-h { color: var(--ink); }

/* Find help search (step 3, 9 Oct 2026) */
.search { display: grid; gap: 14px; margin-bottom: 20px; }
.need { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.need-btn { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--border-strong); background: var(--white); color: var(--ink); cursor: pointer; }
.need-btn strong { font-size: 14px; }
.need-btn span { font-size: 13px; color: var(--ink-light); }
.need-btn[aria-pressed=true] { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--sand-dark); }
.need-btn[aria-pressed=true] strong { color: var(--accent); }
.search-part { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; display: grid; gap: 8px; }
.search-part[hidden] { display: none; }
.search-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-light); margin: 2px 0 0; }   /* like the step labels (21 Oct 2026) */
.opt { font-style: normal; font-weight: 400; color: var(--ink-light); }
.choices-sm { gap: 6px; }
.choices-sm .choice { font-size: 14px; padding: 7px 12px; }
.date-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.date-row .filter { min-width: 0; }   /* 320px phones (21 Oct 2026): two date boxes pushed the search card past the screen edge */
.date-row input { font: inherit; font-size: 15px; color: var(--ink); background: var(--white); border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 10px; width: 100%; min-width: 0; }
.search-note { font-size: 13px; color: var(--error); margin: 0; }
.search .filters { margin: 0; }
.wc-match { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; font-weight: 600; color: var(--fynbos-ink); margin: 10px 0 2px; }
.wc-match svg { flex: none; margin-top: 3px; color: var(--sage); }
.wc-match-close { color: var(--ink-mid); font-weight: 500; }
.wc-match-close svg { color: var(--ink-light); }
.results-sub { grid-column: 1 / -1; font-size: 17px; margin: 14px 0 0; }
@media (max-width: 420px) { .need-btn span { display: none; } }

/* Booking (step 4, 10 Oct 2026) */
.mc-hint { font-size: 14px; font-weight: 700; color: var(--accent); margin: 0; }
.free-part .cal-updated { margin: 12px 0 0; text-align: right; }
button.mc-day { font: inherit; border: 0; cursor: pointer; color: var(--ink); }
.mc-tap:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.mc-sel { background: var(--accent); color: var(--white); }
.mc-sel .mc-bars i { background: rgba(255,255,255,.35); }
.mc-sel .mc-bars i.on { background: var(--white); }
.view-switch.bk-switch { margin-bottom: 10px; }   /* How often: the same switch as Childcare / House and pets (29 Oct 2026) */
.bk-empty { color: var(--ink-light); font-size: 14px; }
.bk-dates { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 10px; }
.bk-date-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-size: 14px; }
.bk-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-mid); margin: 10px 0 4px; }
.contact input[type=date], .contact input[type=text], .contact select, .contact textarea { font: inherit; font-size: 15px; width: 100%; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--white); color: var(--ink); }
.bk-price { font-size: 15px; margin: 12px 0 8px; }
.bk-price strong { font-size: 22px; }
.bk-launch { font-size: 12px; color: var(--ink-light); }
.bk-mine { background: var(--sand); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.bk-mine .bk-mine-head { margin: 0 0 2px; font-weight: 700; }
.bk-mine ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px; }
/* Inside the green "already works for you" note: one box, a thin line between (16 Oct 2026). */
.bk-own .bk-mine { background: none; border-radius: 0; padding: 8px 0 0; margin: 8px 0 0; border-top: 1px solid rgba(78,125,72,.25); color: var(--ink); }
/* One voice in the green box (16 Oct 2026): ink everywhere, bold only for the first line, no capitals. */
.bk-own, .bk-own p, .bk-own strong, .bk-own .bk-mine { color: var(--ink); font-size: 14px; }
.bk-next { padding-left: 20px; font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }   /* numbers line up */
.co-next-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.co-next-actions .btn { width: auto; flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.book-bar { display: none; }
@media (max-width: 859px) {
  .book-bar { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; text-align: center; padding: 14px; border-radius: 28px;
    background: var(--accent); color: var(--white); font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(20,36,47,.25); }
  .profile-page, main#profile { padding-bottom: 72px; }
  /* One main button (16 Oct 2026): the bar at the bottom is the Book button on phones */
  body:has(.book-bar) .hero-contact { display: none; }
  .book-bar { transition: transform .2s ease, opacity .2s ease; }
  .book-bar.is-away { transform: translateY(120%); opacity: 0; pointer-events: none; }
  body:has(.book-bar.is-away) .wa-help { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 860px) {
  .profile-side .contact { position: sticky; top: 16px; }
}

/* Booking box tweaks (10 Oct 2026) */
.bk-parts { align-items: center; }
.bk-x { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--ink-light); cursor: pointer; padding: 2px 4px; margin-left: auto; }
.bk-parts .choice { font-size: 13px; padding: 5px 10px; }
.bk-rate { background: var(--sand); border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 14px; }
.bk-rate p { margin: 4px 0 0; }
.bk-booked { font-size: 14px; background: var(--sand); border-radius: 10px; padding: 8px 12px; }
@media (min-width: 860px) {
  .profile-side .contact { max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; }
}
.find-more { text-align: center; color: var(--ink-mid); font-size: 14px; margin: 28px 0 8px; grid-column: 1 / -1; }
.bk-request { border-top: 3px solid var(--accent); }
.bk-up + .bk-up { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.bk-up p { margin: 2px 0; }

/* ── The account frame (layout A, 10 Oct 2026) ── */
.nav-ic { display: inline-flex; align-items: center; gap: 6px; }
.nav-me { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--accent); border: 1px solid var(--line); background: var(--white); }
.in-app .nav-me { display: none; }
.app { display: grid; gap: 28px; align-items: start; }
.app-main { min-width: 0; }
/* Phones: one bar along the bottom - the sections, then "me" */
.app-side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; background: var(--white);
  border-top: 1px solid var(--line); padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px)); }
.app-nav { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.app-nav a { display: grid; justify-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--ink-light); text-decoration: none; position: relative; padding: 2px; }
.app-nav a[aria-current=page] { color: var(--accent); }
.app-count { position: absolute; top: -2px; left: calc(50% + 6px); background: var(--accent); color: var(--white); font-size: 10px; border-radius: 999px; padding: 0 5px; line-height: 16px; }
/* Room for the green WhatsApp button so it never covers the last lines (16 Oct 2026). */
.in-app main { padding-bottom: 132px; }
.in-app .site-footer, .in-app footer#site-footer { margin-bottom: 64px; }
.app-me { position: relative; padding: 0 10px 0 4px; }
.app-me-btn { font: inherit; border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.app-me-av { width: 34px; height: 34px; border-radius: 50%; background: var(--sand-dark); color: var(--soft-ink); font-weight: 700; font-size: 13px; display: grid; place-items: center; flex: none; }
.app-me-name { display: none; font-weight: 600; font-size: 14px; text-align: left; }
.app-me-menu { position: absolute; right: 6px; bottom: 50px; min-width: 210px; background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 24px rgba(20,36,47,.14); padding: 6px; display: grid; }
.app-me-menu[hidden] { display: none; }
.app-me-menu a, .app-me-menu button { font: inherit; font-size: 14px; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; border: 0; background: none; cursor: pointer; text-align: left; }
.app-me-menu a:hover, .app-me-menu button:hover { background: var(--sand); }
@media (min-width: 860px) {
  .app { grid-template-columns: 200px minmax(0, 1fr); }
  .app-side { flex-direction: column; align-items: stretch; gap: 10px; position: sticky; top: 20px; left: auto; right: auto; bottom: auto;
    background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 10px; z-index: auto; }
  .app-nav { flex: none; display: grid; grid-auto-flow: row; gap: 4px; }
  .app-nav a { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 10px 12px; border-radius: 10px; color: var(--ink-mid); }
  .app-nav a[aria-current=page] { background: var(--sand-dark); color: var(--soft-ink); }
  .app-count { position: static; margin-left: auto; font-size: 11px; line-height: 18px; padding: 0 7px; }
  .app-me { border-top: 1px solid var(--line); padding: 10px 2px 2px; }
  .app-nav a:hover { background: var(--sand); }
  .app-me-name { display: block; }
  .app-me-menu { bottom: 46px; left: 0; right: auto; }
  .in-app main { padding-bottom: 0; }
  .in-app footer#site-footer { margin-bottom: 0; }
}

/* ⓘ tooltips: explanations on hover or tap, instead of a line of text */
.tip { position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1.4px solid var(--ink-light); color: var(--ink-light);
  font-size: 11px; font-weight: 700; font-style: normal; cursor: help; vertical-align: middle; margin-left: 8px; line-height: 1; }
.tip-bubble { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px; text-wrap: pretty; background: var(--ink); color: var(--white); font-size: 12.5px; font-weight: 500;
  line-height: 1.4; padding: 8px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 50; text-align: left; letter-spacing: 0; text-transform: none; }
.tip:hover .tip-bubble, .tip:focus .tip-bubble, .tip.is-open .tip-bubble { opacity: 1; }
.tip-bubble::after { content: ''; position: absolute; top: 100%; left: var(--arrow-x, 50%); margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
.tip-bubble.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tip-bubble { transition: none; } }

/* Account Home: short cards */
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.home-cards .card { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.home-cards .card > .card-more:last-child, .home-cards .card > .btn:last-child { margin-top: auto; align-self: flex-start; }   /* each card's link or button lines up at the bottom (15 Oct 2026) */
.home-cards .card > .card-more:last-child { align-self: flex-end; }   /* links sit bottom right, like elsewhere (19 Oct 2026) */
.home-cards h2 { font-size: 16px; margin: 0; display: flex; align-items: center; }
.home-person { display: flex; align-items: center; gap: 10px; }
.home-faces { display: flex; }
.home-faces .avatar { margin-left: -8px; border: 2px solid var(--white); }
.home-faces .avatar:first-child { margin-left: 0; }
.big-line { font-size: 22px; font-weight: 700; }
/* The account frame needs the full width (the forms inside stay readable) */
.in-app main.wrap.narrow { max-width: 1120px; }
.in-app .app-main > .card, .in-app .app-main > form, .in-app .app-main > section, .in-app .app-main > .empty, .in-app .app-main > p, .in-app .app-main > .delight { max-width: 720px; }
.home-cards a:not(.btn) { text-decoration: none; color: inherit; }
.home-cards .btn { display: inline-flex; align-items: center; gap: 6px; }
.home-cards .btn { width: fit-content; }
.in-app main.admin.is-wide { max-width: 1440px; }

/* Round 2 of the account frame (10 Oct 2026): spacing, warmth, My details */
.app { padding-top: 28px; }
@media (min-width: 860px) { .app { padding-top: 32px; gap: 36px; } .app-side { top: 28px; } }
.app-main > .page-title, .app-main > .welcome { margin-top: 0; }
.ic-bubble { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--sand-dark); color: var(--accent); margin-right: 10px; flex: none; }
.ic-bubble.is-good { background: var(--sage-light); color: var(--fynbos-ink); }
.welcome { margin-bottom: 16px; }
.welcome .page-title { margin: 0; }
.welcome .home-find { margin-top: 14px; }
@media (max-width: 600px) { .welcome .home-find { display: flex; width: 100%; justify-content: center; } }
/* Saved: each helper its own card */
.saved-cards { gap: 10px; max-width: 720px; }
.saved-cards li a { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.saved-cards li a:hover { border-color: var(--accent); }
/* Reviews tab (23 Oct 2026): reviews still to write on top, and room before the WhatsApp line. */
.to-write-row { display: flex; gap: 10px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.to-write-row > span { display: grid; flex: 1; min-width: 0; }
.to-write-row .btn { width: auto; flex: none; }
.sec-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); margin: 18px 0 0; }
.given-help { margin-top: 14px; }
/* My details */
.d-form { display: grid; gap: 16px; max-width: 720px; }
.d-card { padding: 18px 20px; display: grid; gap: 14px; margin: 0; max-width: 720px; }
.d-head { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.d-head .ui-ic { color: var(--accent); }
.d-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.d-row-end { align-items: end; }
.d-field { display: grid; gap: 6px; min-width: 0; }
.d-field .q-label { margin: 0; display: flex; align-items: center; }
.d-field input, .d-field select { width: 100%; }
.d-value { margin: 0; font-size: 15px; }
.d-updates { margin: 0; }
.d-save { display: flex; align-items: center; gap: 12px; }
.d-save .btn { width: auto; }
.d-save .small { display: inline-flex; align-items: center; gap: 4px; color: var(--fynbos-ink); }
.d-save .small[hidden] { display: none; }   /* 23 Oct 2026: the rule above beat [hidden], so "Saved" showed before any change */
#pw-form { margin-top: 16px; }
#pw-form .btn { width: auto; }
.d-row-end .btn { margin-bottom: 1px; }
.d-delete { margin: 24px 0 0; display: flex; align-items: center; }
.link-btn .ui-ic { vertical-align: -3px; }

/* Account frame round 3 (10 Oct 2026, like airfocus): on a computer the menu is a
   full-height panel against the left edge, "me" pinned at its bottom, the header stays put,
   and there's no page footer (its links sit in the menu). */
.app-links { display: none; }
@media (min-width: 860px) {
  .in-app #site-header { position: sticky; top: 0; z-index: 35; background: var(--white); }
  .in-app main.wrap.narrow, .in-app main.admin.is-wide { max-width: none; margin: 0; padding: 0; }
  .in-app #site-footer { display: none; }
  .app { grid-template-columns: 240px minmax(0, 1fr); gap: 0; padding-top: 0; min-height: calc(100vh - var(--hdr, 64px)); }
  .app-side { position: sticky; top: var(--hdr, 64px); height: calc(100vh - var(--hdr, 64px)); border: 0; border-right: 1px solid var(--line);
    border-radius: 0; padding: 18px 12px 12px; gap: 6px; background: var(--white); overflow-y: auto; }
  .app-me { margin-top: 0; }
  .app-links { display: block; margin: auto 0 0; padding: 0 12px 8px; font-size: 13px; color: var(--ink-light); }
  .in-app .nav-inner { max-width: none; padding-left: 22px; padding-right: 28px; }
  .app-links a { color: var(--ink-light); }
  .app-main { padding: 32px 40px 48px; max-width: 1160px; }
  .in-app main.admin .app-main { max-width: none; }
}

/* Round 4 (10 Oct 2026) */
.card-link { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.card-link:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(20,36,47,.06); }
.home-cards .card-link .btn { pointer-events: none; }
.tip-bubble { white-space: normal; }
.who-choice[aria-pressed=true] span { color: rgba(255,255,255,.85); }
.in-app .app-main .acc-card { margin: 0 0 18px; padding: 20px 22px; }
.in-app .app-main .acc-card h2 { margin-bottom: 8px; }
.in-app .app-main .page-title { margin-bottom: 22px; }
.in-app .stack-btns { gap: 10px; }
.acc-danger { border-color: #E9C4B8; background: var(--error-soft); }
.acc-danger h2 { color: var(--error); }
.btn-sm { padding: 8px 14px; font-size: 14px; width: auto; }
.btn-ic { display: inline-flex; align-items: center; gap: 8px; }
.two-col { display: grid; gap: 0 22px; }
@media (min-width: 1100px) { .two-col { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }

/* Admin round 4 (10 Oct 2026) */
.a-pause { color: var(--error); border: 1.5px solid var(--error); background: var(--white); }
.a-pause:hover { background: var(--error-soft); color: var(--error); }
.a-pause-sm { font: inherit; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; margin-left: 6px; }
/* Tiles: the number first, big; the label under it */
.a-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.a-tiles div { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); }
.a-tiles dd { font-size: 30px; line-height: 1.1; margin: 0; color: var(--soft-ink); }
.a-tiles dt { font-size: 13px; }
/* Sign-ups chart */
.rc { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 10px 0 12px; }
.rc-legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink-mid); margin-bottom: 10px; }
.rc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.rc-plot { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; align-items: end; height: 160px; }
.rc-week { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; }
.rc-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--line); }
.rc-bar { width: 22%; min-height: 2px; border-radius: 3px 3px 0 0; position: relative; }
.rc-bar b { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--ink-mid); }
.rc-h { background: var(--accent); } .rc-f { background: var(--sage); } .rc-r { background: #9DB9C7; }
.rc-label { font-size: 11px; color: var(--ink-light); text-align: center; }
/* Working style as a picture */
.ws { display: grid; gap: 8px; }
.ws-key, .ws-legend { font-size: 13px; color: var(--ink-mid); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 4px; }
.ws-legend .ws-v { margin-left: 8px; }
.a-style .ws-row, .ws-row { display: grid; text-align: left; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 24px; align-items: center; gap: 8px; font-size: 13px; list-style: none; padding: 6px 0; border-top: 1px solid var(--line); }
.ws-a { text-align: right; color: var(--ink-mid); }
.ws-b { color: var(--ink-mid); }
.ws-track { display: grid; grid-template-columns: repeat(4, 34px); gap: 2px; position: relative; }
.ws-track::before { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; border-top: 1.5px solid var(--line); }
.ws-slot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 22px; }
.ws-slot > span + span { margin-left: -9px; }
.ws-slot i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.ws-me, .ws-emp { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.ws-me { background: var(--accent); color: var(--white); }
.ws-emp { background: var(--white); color: var(--soft-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ws-v { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; }
.ws-ok { background: var(--sage-light); color: var(--fynbos-ink); }
.ws-mixed, .ws-wait { background: var(--grey-light); color: var(--grey); }
.ws-differs { background: var(--error-soft); color: var(--error); }
/* Bookings calendar */
.bc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bc-head .a-group-title { margin: 0; }
.bc-legend { margin-left: auto; display: flex; gap: 6px; }
.bc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bc-dow { font-size: 12px; font-weight: 600; color: var(--ink-light); text-align: center; }
.bc-day { background: var(--white); border: 1px solid var(--line); border-radius: 8px; min-height: 74px; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bc-day b { font-size: 12px; color: var(--ink-mid); }
.bc-blank { background: none; border: 0; }
.bc-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bc-chip { font-size: 11px; line-height: 1.3; border-radius: 6px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-confirmed { background: var(--sage-light); color: var(--fynbos-ink); }
.bc-waiting { background: var(--white); color: var(--fynbos-ink); box-shadow: inset 0 0 0 1px var(--fynbos-line); }
.bc-ongoing { background: var(--sand-dark); color: var(--soft-ink); }
.bc-more { font-size: 11px; color: var(--ink-light); }
.ws-me, .ws-emp { position: relative; box-shadow: 0 0 0 2px var(--white); }
.ws-emp { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 2px var(--white); }
.a-style .ws-slot > span, .a-style .ws-key span, .a-style .ws-legend span { display: inline-grid; }
.a-style .ws-row > span { display: block; }
.a-style .ws-row > .ws-track { display: grid; }
.a-style .ws-row > .ws-v { display: inline-grid; }
.a-style .ws-slot { display: flex; flex-direction: row; }

/* Admin round 5 (10 Oct 2026): no empty line under a card; pipeline buttons the same size, coloured by stage */
.a-item-foot:empty { display: none; }
.a-pipeline .a-stage-btn { flex: 0 0 92px; width: 92px; padding: 7px 10px; }
.a-sb-new { background: var(--sand-dark); border-color: var(--sand-dark); }
.a-sb-new b { color: var(--soft-ink); }
.a-sb-ready { border-color: var(--sage); }
.a-sb-ready b { color: var(--fynbos-ink); }
.a-sb-live { background: var(--sage-light); border-color: var(--fynbos-line); }
.a-sb-live b { color: var(--fynbos-ink); }
.a-sb-collecting { background: var(--sun-soft); border-color: var(--sun); }
.a-sb-collecting b { color: #7A5410; }
.a-sb-paused { background: var(--grey-light); border-color: var(--grey-light); }
.a-sb-paused b, .a-sb-paused span { color: var(--grey); }
.a-pipeline .a-stage-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
.test-db { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soft-ink); background: var(--sand-dark); border-radius: 999px; padding: 3px 9px; margin-left: 10px; }
.nav-inner { align-items: center; }
.join-login { margin-top: 14px; text-align: center; }

/* Profile, less grey (10 Oct 2026): the summary layers sit on white, divided by a line;
   each review is a white card with a thin edge. */
.profile-main > .block .card.layer { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 18px 0 18px; margin: 0; }
.profile-main > .block .card.layer:first-of-type { border-top: 0; padding-top: 4px; }
.profile-main > .block .card:not(.layer):not(.details):not(.fit) { background: var(--white); border: 1px solid var(--line); }
.bk-when { margin: 0; padding-left: 16px; text-align: left; }
.bk-when li { margin: 2px 0; }
.summary .bk-when-row { align-items: flex-start; }
.summary .bk-when-row dd { text-align: left; }
.bk-booked .bk-when { margin-top: 4px; }
.a-warn { color: var(--error); }
/* To do as small tabs (10 Oct 2026) */
.a-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.a-subtabs button { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink-mid); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.a-subtabs button span { background: var(--sand-dark); color: var(--soft-ink); border-radius: 999px; padding: 0 7px; font-size: 12px; }
.a-subtabs button[aria-selected=true] { background: var(--accent); border-color: var(--accent); color: var(--white); }
.a-subtabs button[aria-selected=true] span { background: rgba(255,255,255,.25); color: var(--white); }
/* Pipeline fits without a scrollbar (10 Oct 2026) */
.a-pipeline { flex-wrap: wrap; overflow: visible; }
.a-pipeline .a-stage-btn { flex: 1 1 74px; width: auto; max-width: 110px; }
.a-pipeline .a-arrow { flex: none; }
.in-app main.admin:not(.is-wide) .a-panel { max-width: 860px; }
.a-x { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--ink-light); cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.a-x:hover { background: var(--sand); color: var(--ink); }

/* Helper sign-up rework (10 Oct 2026) */
.q-private { background: var(--sand-dark); border-color: #CFDEE7; }
.q-private .q-title { display: flex; align-items: center; gap: 8px; }
.rand-row { display: flex; align-items: center; gap: 8px; }
.rand-row input { max-width: 140px; }
.rand-row span { font-weight: 600; color: var(--ink-mid); }
.signup-week .btn-primary[data-save] { display: none; }
.dob-row { display: grid; grid-template-columns: 0.8fr 1.4fr 1fr; gap: 8px; }
/* Declined and removed (10 Oct 2026) */
.a-stage-declined, .a-sb-declined { background: var(--grey-light); color: var(--grey); border-color: var(--grey-light); }
.a-stage-removed, .a-sb-removed { background: var(--error-soft); color: var(--error); border-color: var(--error-soft); }
.a-sb-removed b, .a-sb-removed span { color: var(--error); }
.a-note-box { margin: 14px 0 6px; display: grid; gap: 6px; }
.a-note-box textarea { font: inherit; font-size: 14px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 10px; resize: vertical; transition: border-color .3s; }
.a-note-box textarea.is-saved { border-color: var(--sage); }
.a-top-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* The basics in clear colours once chosen (10 Oct 2026): Always green, Mostly yellow,
   Not really red. A deliberate exception to the brand colour rule, for this one answer scale. */
.seg3 button[data-basic="always"][aria-pressed="true"] { background: var(--sage); color: var(--white); }
.seg3 button[data-basic="mostly"][aria-pressed="true"] { background: #F2C14E; color: var(--ink); }
.seg3 button[data-basic="not-really"][aria-pressed="true"] { background: var(--error); color: var(--white); }
.seg3 button[data-basic="always"]:not([aria-pressed="true"]):hover { color: var(--fynbos-ink); }
.seg3 button[data-basic="not-really"]:not([aria-pressed="true"]):hover { color: var(--error); }
.seg3 button[data-basic="mostly"]:not([aria-pressed="true"]):hover { color: var(--ink); }
/* Reference page (10 Oct 2026): a bigger photo, why it matters, an official safe-and-private box */
.ref-intro .avatar { width: 72px; height: 72px; font-size: 24px; flex: none; }
.ref-why { margin: 4px 0 14px; font-size: 15px; color: var(--ink-mid); }
.ref-why p { margin: 0; }
.safe-box { background: #DCEAF2; border: 1px solid #BFD6E4; border-left: 4px solid var(--soft-ink); }   /* a firmer blue on the tinted page (15 Oct 2026) */
.safe-box li svg { color: var(--soft-ink); }
.safe-box h2 { display: flex; align-items: center; gap: 8px; color: var(--soft-ink); }
.safe-box h2 .ui-ic { color: var(--accent); }
/* WhatsApp help button (10 Oct 2026) */
.wa-help { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 45; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: #25D366; color: var(--white); box-shadow: 0 6px 18px rgba(20,36,47,.25); }
/* WhatsApp green for launch (10 Oct 2026): an exception to the brand colours, so people recognise it. */
.wa-help:hover { background: #1EBE5A; }
@media (max-width: 859px) {
  body:has(.book-bar) .wa-help, body.in-app .wa-help { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* Phones (16 Oct 2026): it covered the calendar arrow, the report flag and prices. On account
     screens, profiles and checkout "WhatsApp us" sits in the links at the end of the page instead. */
  body.in-app .wa-help, body.no-wa-phone .wa-help { display: none; }
}
.ref-next { background: var(--sand-dark); border-radius: 12px; padding: 14px 16px; margin-top: 12px; display: grid; gap: 10px; }
.ref-next p { margin: 0; }
.ref-next .btn { width: fit-content; }

/* Admin: upload a photo or certificate for a helper */
.a-uploads { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.a-uploads select { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--white); }

/* Admin: role filter above To do and Helpers */
.a-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.a-roles button { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--white); color: var(--ink); cursor: pointer; }
.a-roles button span { opacity: 0.6; font-weight: 500; }
.a-roles button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.a-roles-select { display: none; }
/* Admin on phones (16 Oct 2026): the chips and tabs filled half the screen. One role dropdown,
   empty To do tabs tucked away (the chosen one always shows), slimmer tabs. */
@media (max-width: 599px) {
  .a-role-bar { display: none; }   /* only the role chips (28 Oct 2026: .a-roles also hid Collecting's, Households' and Reports' chips) */
  .a-roles-select { display: block; width: 100%; margin: 0 0 8px; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--border-strong); border-radius: 999px; padding: 9px 14px; }
  .a-subtabs button.is-empty:not([aria-selected=true]) { display: none; }
  .admin-body .a-subtabs button { padding: 8px 10px; }
}

/* Real profile photos (10 Oct 2026) */
img.avatar-photo { object-fit: cover; display: block; padding: 0; }

/* ── Find help: search card, compact bar and Filters panel (10 Oct 2026) ── */
.search-card { background: var(--white); border-radius: 16px; padding: 20px; box-shadow: 0 4px 24px rgba(20,36,47,.07); display: grid; gap: 10px; width: 100%; max-width: 680px; margin: 0 auto; }   /* one width, about today's (21 Oct 2026: it changed width with the role's words) */
.search-card[hidden], .search-bar[hidden] { display: none; }
.search-card .page-title { margin: 0 0 4px; font-size: 28px; }
.search-step { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-light); margin: 8px 0 0; }
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.who-btn { font: inherit; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--white); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.who-btn strong { font-size: 14px; }
.who-btn span { font-size: 12px; color: var(--ink-light); }
.who-btn[aria-pressed=true] { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--sand-dark); }
.who-btn[aria-pressed=true] strong { color: var(--accent); }
.who-btn:disabled { border-style: dashed; color: var(--ink-light); cursor: default; }
@media (max-width: 600px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } .who-btn:disabled { padding: 7px 10px; } .who-btn:disabled strong { font-size: 13px; font-weight: 600; } }
.where-select { font: inherit; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--white); color: var(--ink); }
.search-go { margin-top: 10px; }
.search-browse { justify-self: center; }
.search-part .filter { margin-top: 4px; max-width: 220px; }
.where-select { max-width: 360px; }
/* Editing one part from the bar: only that part shows, results stay below. */
.search-card.is-focus .page-title, .search-card.is-focus .search-browse { display: none; }
.search-card.is-focus [data-part]:not(.is-on) { display: none !important; }

.family-hero.is-compact { padding-top: 14px; padding-bottom: 14px !important; }
.family-hero.is-compact .coast { display: none; }
.search-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bar-chip { font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--white); color: var(--ink); cursor: pointer; max-width: 100%; }
.bar-chip.is-on { border-color: var(--accent); color: var(--accent); background: var(--sand-dark); }
@media (max-width: 480px) { .bar-chip { font-size: 13px; padding: 7px 11px; } .bar-role, .bar-long { display: none; } }
/* Phones (23 Oct 2026): kind of help, place and filters share the first line; the longer "when" chip gets the second (was three lines). */
@media (max-width: 480px) { .search-bar [data-open="when"] { order: 5; } .search-bar .active-chip { order: 6; } }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.active-chip { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--white); color: var(--ink); cursor: pointer; }
.results-head { flex-wrap: wrap; gap: 8px; }
.wc-fresh { font-size: 12px; color: var(--ink-light); }
.stale-more { grid-column: 1 / -1; font-size: 14px; color: var(--ink-light); border: 1px dashed var(--border-strong); border-radius: 12px; padding: 12px 14px; }

.sheet-back { position: fixed; inset: 0; background: rgba(20,36,47,.35); z-index: 60; }
.filter-sheet { position: fixed; z-index: 61; background: var(--white); display: flex; flex-direction: column;
  left: 0; right: 0; bottom: 0; max-height: 88vh; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 30px rgba(20,36,47,.15); }
.filter-sheet[hidden], .sheet-back[hidden] { display: none; }
@media (min-width: 760px) { .filter-sheet { left: auto; top: 0; width: 420px; max-height: none; border-radius: 0; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: 18px; }
.sheet-head .icon-btn { width: 44px; height: 44px; border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--ink); }
.sheet-body { overflow-y: auto; padding: 4px 20px 16px; flex: 1; }
.sheet-group { border: 0; padding: 0; margin: 16px 0 0; }
.sheet-group legend { font-weight: 700; font-size: 15px; margin-bottom: 8px; padding: 0; }
.choices.is-folded .choice:nth-child(n+7):not([data-unfold]) { display: none; }
.sheet-foot { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.sheet-foot .btn { width: auto; flex: none; }
.sheet-foot .btn-primary { flex: 1; }
body.sheet-open { overflow: hidden; }

/* ── Helper card A3 (10 Oct 2026): photo on top, a slim numbers strip, one line from a review ── */
.worker-card.wc-strip, .worker-card.wc-blocks { align-items: center; text-align: center; gap: 8px; padding-top: 20px; }
.worker-card .avatar-lg { width: 84px; height: 84px; font-size: 28px; margin-bottom: 4px; flex: none; }
.worker-card .wc-roles { font-size: 14px; color: var(--ink-light); }
.worker-card .wc-match { justify-content: center; margin: 0; font-size: 13px; background: var(--sand); border-radius: 999px; padding: 3px 10px; }
.worker-card .wc-match-close { background: #FDF0E3; color: var(--ink); font-weight: 600; align-items: center; border-radius: 12px; }   /* soft orange: free on only some days (26 Oct 2026) */
.worker-card .wc-match-close svg { color: #C9752A; margin-top: 0; }
.wc-numbers { display: flex; width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 4px; }
.wc-numbers > span { flex: 1; padding: 6px 4px; border-left: 1px solid var(--line); display: flex; flex-direction: column; line-height: 1.25; }
.wc-numbers > span:first-child { border-left: 0; }
.wc-numbers strong { font-size: 16px; }
.wc-numbers em { font-style: normal; font-size: 12px; color: var(--ink-light); }
.wc-numbers .stars { color: var(--gold, #D9A030); }
/* A1 look (cardNumbers: 'blocks' in settings.js): separate blocks instead of one strip. */
.wc-blocks .wc-numbers { border: 0; gap: 8px; overflow: visible; }
.wc-blocks .wc-numbers > span { border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; }
.wc-quote { margin: 4px 0 0; width: 100%; box-sizing: border-box; text-align: left; font-size: 14px; line-height: 1.45; color: var(--ink-mid);
  background: var(--sand); border-radius: 10px; padding: 10px 12px; }
.wc-quote span { display: block; font-size: 12px; color: var(--ink-light); font-weight: 600; margin-top: 3px; }
.worker-card .wc-foot { justify-content: center; }
/* Heart with a count: a small pill when there's a number. */
.wc-wrap > .heart { width: auto; min-width: 32px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.heart-n { font-size: 13px; font-weight: 600; color: var(--ink-mid); }
.heart-n:empty { display: none; }

/* Find help after a search (10 Oct 2026): less white - the results sit on mist, cards stay white. */
.family-hero.is-compact .search { margin-bottom: 0; }
.family-hero.is-compact { border-bottom: 1px solid var(--line); background: var(--white); }
main:has(.family-hero.is-compact) { background: var(--sand); }

/* No white strips (10 Oct 2026): results on mist all the way to the footer;
   the first-visit card's mist stretches down with the landscape at the bottom. */
body:has(.family-hero.is-compact) { background: var(--sand); }
body.search-start > main { display: flex; flex-direction: column; }
body.search-start .family-hero { flex: 1 0 auto; display: flex; flex-direction: column; }
body.search-start .family-hero > .wrap { flex: 1 0 auto; padding-bottom: 24px; }
body.search-start .results { display: none; }
body.search-start #site-footer { margin-top: 0; }   /* the landscape sits right on the footer */

/* Admin: profile photo with its own buttons; destructive actions folded away (10 Oct 2026) */
.a-photo-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.a-photo-row .a-uploads { margin: 0; }
.a-danger-fold > summary { color: var(--error); }

/* Find help: "Looking for something different?" at the bottom of the page (10 Oct 2026) */
body:has(.family-hero.is-compact) > main { display: flex; flex-direction: column; }
body:has(.family-hero.is-compact) .results { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }
.results .find-more { margin-top: auto; padding-top: 32px; padding-bottom: 8px; }
.search-bar .active-chip { padding: 8px 12px; font-size: 13px; }

.a-welcome { margin: 8px 0; display: flex; align-items: center; gap: 6px; }
.a-welcome .btn { display: inline-flex; align-items: center; gap: 6px; width: auto; }

/* Referee form: reassurance for current employers (11 Oct 2026) */
.now-note { margin: 10px 0 4px; background: var(--sand-dark); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.now-note p { margin: 0 0 6px; }
.now-note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.now-note li { display: flex; gap: 8px; align-items: flex-start; }
.now-note li svg { flex: none; margin-top: 4px; color: var(--sage); }

.a-nudge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; }
.a-nudge .btn { display: inline-flex; align-items: center; gap: 6px; width: auto; }

/* Calendar check: one compact line per helper */
.a-cal-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.a-cal-row .a-who { flex: 1; min-width: 0; }
.a-cal-row .a-meta { margin: 0; }
.a-avatar-sm { width: 36px !important; height: 36px !important; font-size: 13px !important; }
.a-icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--white); color: var(--accent); display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.a-icon-btn svg { width: 18px; height: 18px; }
.a-wa-btn { color: #1EBE5A; }

/* ── Full-page checkout (11 Oct 2026) ── */
body:has(.checkout-page) { background: var(--page-tint); }
.co-wrap { padding-top: 18px; }
.co-back { font-size: 14px; font-weight: 600; text-decoration: none; }
.co-wrap .page-title { margin: 6px 0 16px; }
.co-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .co-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .co-side { position: sticky; top: 84px; } }
.co-main, .co-side { display: grid; gap: 14px; min-width: 0; }
/* Phones: the helper's "Checked by" card comes first, under the stepper (13 Oct 2026). */
@media (max-width: 899px) { .co-grid { gap: 14px; } .co-main, .co-side { display: contents; } .co-who { order: -1; } }
.co-card { padding: 16px 18px; display: grid; gap: 10px; position: relative; }
.co-card h2 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mid); }
.co-card p { margin: 0; }
.co-when { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-weight: 600; }
.co-edit { position: absolute; top: 14px; right: 18px; font-size: 13px; font-weight: 600; }
.co-job { gap: 18px; }
.co-q { display: grid; gap: 8px; }
.co-q label, .co-label { font-weight: 600; font-size: 14px; margin: 0; }
.co-q input, .co-q select, .co-q textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--white); color: var(--ink); max-width: 100%; }
.co-q select { max-width: 160px; }
.co-q .q-error { display: none; }
.co-q.has-error .q-error { display: block; }
.co-q.has-error input, .co-q.has-error select { border-color: var(--error); }
.co-person { display: flex; gap: 12px; align-items: center; }
.co-person strong { display: block; font-size: 17px; }
.co-person .muted { font-size: 13px; }
.co-proof { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink-mid); }
.co-proof li { display: flex; gap: 8px; align-items: flex-start; }
.co-proof svg { flex: none; margin-top: 4px; color: var(--sage); }
.co-row { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.co-total { font-weight: 700; font-size: 17px; border-top: 1px solid var(--line); padding-top: 8px; }
.co-pay { width: 100%; font-size: 16px; padding: 14px; }
.co-fail:empty { display: none; }
.co-msg { padding-top: 40px; display: grid; gap: 14px; justify-items: start; }
.co-done { padding-top: 30px; padding-bottom: 50px; display: grid; gap: 16px; max-width: 640px; }
.co-done .btn { width: auto; justify-self: start; }
.bk-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-range label { display: grid; gap: 4px; }
.bk-range input { font: inherit; padding: 8px; border: 1px solid var(--border-strong); border-radius: 8px; min-width: 0; }
.bk-repeat-sum { font-size: 14px; background: var(--sand); border-radius: 10px; padding: 8px 10px; margin: 4px 0; }

/* Checkout round 2 (11 Oct 2026) */
.co-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 14px; color: var(--ink-light); margin-bottom: 4px; }
.co-steps a { display: inline-flex; align-items: center; gap: 4px; color: var(--sage); font-weight: 600; text-decoration: none; }
.co-steps .is-on { color: var(--accent); font-weight: 700; }
.co-secure { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-mid); }
.co-person .avatar { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--sun); }
.co-side .co-fail { display: block; }
.co-side .co-fail:empty { display: none; }
.bk-warn { background: #FBEAE4; color: var(--error); }

/* Checkout stepper and confirmation (11 Oct 2026) */
.co-stepbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px; margin-bottom: 14px; }
.co-stepper { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex: 1 1 360px; max-width: 560px; }
.co-stepper li { display: flex; align-items: center; flex: 1; font-size: 14px; color: var(--ink-light); }
.co-stepper li + li::before { content: ""; flex: 1; height: 2px; background: var(--line); margin: 0 10px; min-width: 16px; }
.co-stepper li.is-done + li::before, .co-stepper li.is-now::before { background: var(--sage); }
.co-stepper li > a, .co-stepper li > .co-dot { text-decoration: none; }
.co-stepper a { display: flex; align-items: center; gap: 8px; color: inherit; }
.co-stepper li { gap: 0; }
.co-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 2px solid var(--line); background: var(--white); color: var(--ink-light); flex: none; }
.co-dot svg { width: 14px; height: 14px; }
.co-step-label { margin-left: 8px; white-space: nowrap; }
.co-stepper li.is-done .co-dot { background: var(--sage); border-color: var(--sage); color: #fff; }
.co-stepper li.is-done { color: var(--fynbos-ink); font-weight: 600; }
.co-stepper li.is-now .co-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.co-stepper li.is-now { color: var(--ink); font-weight: 700; }
@media (max-width: 520px) { .co-step-label { font-size: 12px; } .co-stepper li:not(.is-now) .co-step-label { display: none; } }
.co-stepbar .co-secure { margin-left: 0; }
.co-delight { margin-bottom: 14px; }
.co-details { display: grid; gap: 0; }
.co-row-d { padding: 10px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.co-row-d span:first-child { color: var(--ink-light); min-width: 120px; }
.co-row-d span:last-child { text-align: right; font-weight: 600; }
/* Phones (23 Oct 2026): short labels keep their own width, so long values (When, Children) get the room instead of a narrow column. */
@media (max-width: 480px) { .co-row-d span:first-child { min-width: 0; flex: none; } .co-row-d span:last-child { min-width: 0; } }
.co-phone { font-size: 22px; font-weight: 700; letter-spacing: .01em; }
.co-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.co-actions .btn { width: auto; flex: 1 1 140px; }

/* Stepper v2: steps and equal lines alternate (11 Oct 2026) */
.co-stepper { display: flex; align-items: center; gap: 0; flex: 1 1 380px; max-width: 600px; }
.co-step { display: flex; align-items: center; flex: none; font-size: 14px; color: var(--ink-light); }
.co-step a { display: flex; align-items: center; color: inherit; text-decoration: none; }
.co-line { flex: 1; height: 2px; background: var(--line); margin: 0 12px; min-width: 18px; }
.co-line.is-done { background: var(--sage); }
.co-step.is-done .co-dot { background: var(--sage); border-color: var(--sage); color: #fff; }
.co-step.is-done { color: var(--fynbos-ink); font-weight: 600; }
.co-step.is-now .co-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.co-step.is-now { color: var(--ink); font-weight: 700; }
@media (max-width: 520px) { .co-step:not(.is-now) .co-step-label { display: none; } }

/* Stars (11 Oct 2026): grey stars with gold filled to the rating */
.stars-bar { position: relative; display: inline-block; color: var(--line); letter-spacing: 1px; line-height: 1; font-size: 15px; vertical-align: -1px; white-space: nowrap; }
.stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--gold, #D9A030); white-space: nowrap; }
.ref-stars { margin: 4px 0 0; }

/* Referee form: tap 1 to 5 stars (11 Oct 2026) */
.star-input { display: flex; align-items: center; gap: 4px; }
.star-input button { font-size: 32px; line-height: 1; padding: 2px 4px; background: none; border: 0; cursor: pointer; color: var(--line); min-width: 44px; min-height: 44px; }
.star-input button.is-on { color: var(--gold, #D9A030); }
.star-input button:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
.star-word { margin-left: 8px; font-size: 14px; font-weight: 600; color: var(--ink-mid); }
.star-ends { display: flex; justify-content: space-between; max-width: 250px; font-size: 12px; color: var(--ink-light); margin-top: 2px; }

/* Cards: number cells the same height, content centred (11 Oct 2026) */
.wc-numbers > span { justify-content: center; min-height: 54px; }
/* Checkout helper card: official look */
.co-who { border-top: 3px solid var(--sage); background: linear-gradient(180deg, var(--fynbos-soft, #E4EEE2) 0, var(--white) 70px); }
.co-checked { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fynbos-ink); margin: 0; }
.co-checked svg { color: var(--sage); }
.co-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 3px; color: var(--ink-mid); }
.co-person .muted { display: block; }
/* Checkout: a calm header - logo only, no menu (11 Oct 2026) */
/* Referee stars: a little wider */
.star-input { gap: 10px; }
.star-input button { font-size: 36px; }
.star-ends { max-width: 300px; }

/* Star breakdown per basic on the profile (11 Oct 2026) */
.basics li { display: flex; align-items: center; gap: 8px; }
.basic-label { flex: 1; min-width: 0; }
.basic-stars { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-mid); white-space: nowrap; }
.basic-stars .stars-bar { font-size: 13px; }

/* Review lines: the employer on the right, everywhere (11 Oct 2026) */
.wc-quote span { text-align: right; }
/* Referee stars, calmer: no end labels under every row, a little smaller */
.star-input button { font-size: 30px; min-width: 40px; }
.star-input { gap: 6px; }

/* My bookings, round 2 (11 Oct 2026) */
.bk-tabs { display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap; }
/* Smaller so all four fit on one line on a helper's phone (16 Oct 2026). */
.bk-tabs button { font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink-mid); cursor: pointer; }
.bk-tabs button span { opacity: .65; }
.bk-tabs button[aria-selected=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk-layout { display: grid; gap: 16px; }
@media (min-width: 980px) { .bk-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.bk-col { display: grid; gap: 14px; min-width: 0; align-content: start; }
.bk-next-card { padding: 18px; }
.bk-next-grid { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; }
.bk-tile { display: block; width: 64px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-align: center; background: var(--white); flex: none; }
.bk-tile span { display: block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 0; text-transform: uppercase; letter-spacing: .04em; }
.bk-tile b { display: block; font-size: 24px; line-height: 1.2; padding-top: 3px; }
.bk-tile i { display: block; font-style: normal; font-size: 11px; color: var(--ink-light); padding-bottom: 5px; }
.bk-next-body { display: grid; gap: 10px; min-width: 0; }
.bk-next-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-actions, .bk-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-wa { background: #25D366; color: #fff; border-color: #25D366; }
.bk-actions .btn, .bk-row-actions .btn { width: auto; }
.bk-details { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; grid-column: 1 / -1; }
.bk-details summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: 14px; }
.bk-list { list-style: none; margin: 0; padding: 0; display: grid; }
.bk-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.bk-row:first-child { border-top: 0; }
.bk-row .bk-tile { width: 54px; }
.bk-row .bk-tile b { font-size: 19px; }
.bk-row-main { display: grid; min-width: 0; }
.bk-row-main .muted { font-size: 13px; }
@media (max-width: 640px) { .bk-row { grid-template-columns: auto minmax(0, 1fr); } .bk-row > .avatar { display: none; } .bk-row-actions, .bk-row > .status { grid-column: 1 / -1; } }
.sub-head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mid); margin: 0 0 6px; }
.bk-week-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bk-week-head .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); cursor: pointer; font-size: 18px; color: var(--accent); }
.bk-week-grid { display: grid; grid-template-columns: minmax(70px, auto) repeat(7, 1fr); gap: 4px; align-items: center; margin-top: 10px; }
.bk-wh { text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-light); border-radius: 6px; padding: 2px 0; }
.bk-wn { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; min-width: 0; overflow: hidden; }
.avatar-xs { width: 22px !important; height: 22px !important; font-size: 9px !important; box-shadow: none !important; flex: none; }
.bk-wc { height: 22px; border-radius: 6px; background: var(--sand); }
.bk-wc.is-on { background: var(--accent); }
.bk-wempty { grid-column: 1 / -1; font-size: 13px; padding: 6px 0; }

/* Profile calendar tidy (11 Oct 2026) */
.mc-side { margin-top: 44px; gap: 18px; flex: 0 1 230px; }
.mc-usual h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mid); margin: 0 0 8px; }
.mc-usual .free-lines li { font-size: 14px; align-items: flex-start; line-height: 1.4; }
.mc-usual .free-dot { margin-top: 6px; }
.mc-key { gap: 8px; font-size: 13px; padding-top: 14px; border-top: 1px solid var(--line); }
.mc-side .cal-updated { display: flex; align-items: center; gap: 5px; margin: 0; text-align: left; }
.mc-side .cal-updated svg { color: var(--sage); }
@media (max-width: 700px) { .mc-side { margin-top: 16px; } }

.bk-person { text-decoration: none; color: inherit; }
.bk-person h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bk-see { font-size: 13px; font-weight: 600; color: var(--accent); }
.bk-next-card:not(.is-first) h2 { font-size: 17px; }
.bk-row-name { font-weight: 700; color: var(--ink); text-decoration: none; }
.bk-row-name:hover, .bk-person:hover h2 { text-decoration: underline; }
/* When the side drops below the calendar, use the full width in two columns */
.mc-side { flex: 1 1 220px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 24px; }
.mc-side .mc-hint, .mc-side .cal-updated { grid-column: 1 / -1; }
.mc-side .mc-key { border-top: 0; padding-top: 0; }
.mc-layout .mc { max-width: 440px; }

/* Profile calendar, simpler (11 Oct 2026): full width, one line of key */
.mc.mc-full { max-width: none; }
.mc-full .mc-day, .mc-full .mc-grid > * { min-width: 0; }
.mc-hint { margin: 0 0 8px; }
.mc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.mc-k { display: inline-flex; align-items: center; gap: 6px; }
/* The helper's own legend is plainer so it doesn't look tappable (16 Oct 2026). */
.mc-own .mc-foot, .mc-own + .mc-foot { font-size: 12px; color: var(--ink-light); gap: 6px 14px; border-top: 0; padding-top: 4px; pointer-events: none; user-select: none; }
.mc-own .mc-foot .mc-key-bar, .mc-own + .mc-foot .mc-key-bar { width: 14px; height: 4px; }
.mc-foot .cal-updated { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
.mc-foot .cal-updated svg { color: var(--sage); }
/* Card: day rate bottom right */
.wc-rate { margin-left: auto; font-size: 14px; color: var(--ink-mid); }
.wc-rate b { color: var(--ink); }
.worker-card .wc-foot { width: 100%; justify-content: space-between; }
/* Profile side: Save and Copy link as one row */
.side-actions { display: flex; gap: 10px; }
.side-actions > * { flex: 1; }

.bk-next-card { position: relative; }
.bk-eye { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); background: var(--white); }
.bk-eye:hover { border-color: var(--accent); }
.bk-wa svg { margin-right: 2px; }
/* Booking box first: the whole side column stays in view instead (nothing slides under it) */
@media (min-width: 860px) { .profile-side .contact { position: static; } .profile-side { position: sticky; top: 16px; align-self: start; } }

/* Admin: the To do groups are tabs under the role chips (underline, not pills) - 11 Oct 2026 */
.a-subtabs { gap: 0; border-bottom: 1px solid var(--line); margin-top: 4px; }
.a-subtabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 9px 14px; margin-bottom: -1px; }
.a-subtabs button[aria-selected=true] { border-bottom-color: var(--accent); color: var(--accent); background: none; }
/* Admin: booking dates one per line */
.a-item .a-meta { white-space: pre-line; }
.a-subtabs button[aria-selected=true] span { background: var(--sand-dark); color: var(--accent); }
.a-subtabs button.is-alert, .a-subtabs button.is-alert[aria-selected=true] { color: var(--error); }
.a-subtabs button.is-alert span { background: var(--error); color: var(--white); }
/* Empty tabs stay put but go quiet, with no number; tabs with work are bold with a solid count (13 Oct 2026). */
.a-subtabs button.is-empty { color: var(--soft-ink); opacity: .55; font-weight: 500; }
.a-subtabs button:not(.is-empty) { color: var(--ink); font-weight: 700; }
.a-subtabs button span, .a-subtabs button[aria-selected=true] span { background: var(--accent); color: var(--white); font-weight: 700; }
.a-subtabs button.is-alert, .a-subtabs button.is-alert[aria-selected=true] { color: var(--error); }
.a-subtabs button.is-alert span, .a-subtabs button.is-alert[aria-selected=true] span { background: var(--error); color: var(--white); }

.bk-many summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: 14px; margin: 4px 0; }
.bk-many .bk-dates { max-height: 320px; overflow-y: auto; }

/* Working style in the helper sign-up: numbered cards (12 Oct 2026) */
.ws-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-top: 10px; background: var(--white); display: grid; gap: 10px; }
.ws-card.is-done { border-color: var(--sage); }
.ws-num { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-light); }
.ws-opts { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.ws-or { align-self: center; font-size: 13px; color: var(--ink-light); }
.ws-opt { font: inherit; font-size: 15px; font-weight: 600; text-align: center; padding: 12px 10px; border-radius: 12px; border: 1.5px solid var(--border-strong); background: var(--white); color: var(--ink); cursor: pointer; min-height: 56px; }
.ws-opt[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ws-amt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-mid); }
@media (max-width: 420px) { .ws-opts { grid-template-columns: 1fr; } .ws-or { text-align: center; } }

/* Netlify adds a "Powered by Netlify" badge to the live site (12 Oct 2026: asked to remove it). */
iframe[title="Powered by Netlify"] { display: none !important; }

/* 12 Oct 2026: admin-only profile preview banner; the "new household" note on the referee form; referee photo ring */
.admin-preview { display: flex; gap: 8px; align-items: center; background: var(--sand-dark); color: var(--ink); font-size: 14px; padding: 10px 16px; justify-content: center; }
.new-note:not([hidden]) { display: flex; gap: 8px; align-items: flex-start; }
.new-note svg { flex: none; margin-top: 3px; }
.ref-intro .avatar { box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px var(--sun); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 46px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 8px; color: var(--ink-light); cursor: pointer; line-height: 0; }
.pw-eye[aria-pressed=true] { color: var(--accent); }
/* Phone menu easier to notice (12 Oct 2026): a soft shadow, darker labels, the current section in a pill */
@media (max-width: 859px) {
  .app-side { box-shadow: 0 -4px 16px rgba(20, 36, 47, .08); }
  .app-nav a { font-size: 12px; color: var(--ink-mid); padding: 4px 2px; }
  .app-nav a svg { padding: 3px 14px; border-radius: 999px; box-sizing: content-box; }
  .app-nav a[aria-current=page] svg { background: var(--sand-dark); }
}
/* The bar may shrink to fit on every phone (28 Oct 2026: at 375-429px, most iPhones, admin's six icons
   pushed "HH" half off the right edge; it was only allowed below 375px). */
@media (max-width: 859px) {
  .app-nav { min-width: 0; }
  .app-nav a { min-width: 0; }
}
/* Small phones (320px, 16 Oct 2026): the last icon was cut off; slimmer pills so all six fit */
@media (max-width: 374px) {
  .app-nav a svg { padding: 3px 8px; }
  .app-me { padding: 0 6px 0 2px; }
}
.a-missing { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 14px; }
.a-missing summary { cursor: pointer; font-weight: 600; color: var(--ink-mid); }
.a-missing ul { margin: 6px 0 2px; padding-left: 18px; color: var(--ink-mid); }
.cal-add { align-items: flex-end; }
.cal-add label { display: grid; gap: 2px; flex: 1 1 130px; }
.cal-add label input { width: 100%; }
.cal-add select { flex: 0 1 130px; }
.a-month { margin-bottom: 14px; }

/* Report a problem and round icon buttons on bookings (12 Oct 2026) */
.bk-actions, .bk-row-actions { align-items: center; }
.bk-actions-gap { flex: 1; }
.ic-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--accent); display: inline-grid; place-items: center; cursor: pointer; padding: 0; flex: none; text-decoration: none; }
.ic-btn:hover { border-color: var(--accent); }
.ic-wa { background: #25D366; border-color: #25D366; color: #fff; }
.ic-flag { color: var(--error); }
.ic-flag:hover { border-color: var(--error); }
.bk-problem { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--grey-light); color: var(--ink-mid); }
.bk-problem.is-ok { background: var(--sage-light); color: var(--fynbos-ink); }
.ic-flag.is-on { background: var(--error); border-color: var(--error); color: var(--white); }
.bk-problem.is-reported { background: var(--white); border: 1px solid var(--error); color: var(--error); }
.sheet .q-error:not([hidden]) { display: block; }
.sheet .q-label.rv-missing { color: var(--error); }
.bk-earlier { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-earlier .ic-flag { margin-left: auto; width: 34px; height: 34px; }
.sheet-wrap { position: fixed; inset: 0; z-index: 100; background: rgba(20, 36, 47, .35); display: grid; place-items: end center; }
.sheet { background: var(--white); width: 100%; max-width: 460px; border-radius: 18px 18px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; max-height: 90vh; overflow: auto; }
@media (min-width: 640px) { .sheet-wrap { place-items: center; } .sheet { border-radius: 18px; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head h2 { margin: 0; font-size: 20px; }
.choices-stack { display: grid; gap: 8px; }
.choices-stack .choice { text-align: left; }
.sheet textarea { width: 100%; }
.sheet .sheet-head { padding: 0 0 8px; }
.a-problem { border-left: 3px solid var(--error); }
.a-wa-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
.a-wa-ic { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-mid); text-decoration: none; }
.a-wa-ic svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #25D366; color: #fff; box-sizing: border-box; }
/* Reference card in the order a reference is decided (20 Oct 2026) */
.a-refcard { display: grid; gap: 8px; }
.a-refcard > p, .a-refcard .a-quote { margin: 0; }
.a-ref-verdict { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 15px; }   /* its own name since 28 Oct 2026: Reports' .a-verdict pill leaked in */
.a-yes { color: var(--fynbos-ink); font-weight: 700; }
.a-no { color: var(--error); font-weight: 700; }
.a-public, .a-between { border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.a-public { background: var(--sand); }
.a-between { background: var(--sand-dark); font-size: 14px; }
.a-between p { margin: 0; }
.a-update { border: 1px dashed var(--accent); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; font-size: 14px; }
.a-update p, .a-update ul { margin: 0; }
.a-update ul { padding-left: 18px; display: grid; gap: 2px; }
.a-box-k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mid); }
.a-ref-more summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
.a-ref-more .a-answers { margin-top: 6px; }
.a-decide { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line); }
.a-decide .btn { width: auto; }
.a-decide .link-btn { color: var(--ink-mid); }
.seal { display: inline-grid; vertical-align: -5px; margin-left: 5px; color: var(--sage); cursor: help; }
.tip.seal { width: auto; height: auto; border: 0; border-radius: 0; color: var(--sage); font-size: inherit; }
/* Review after a booking (12 Oct 2026) */
.rv-q { display: grid; gap: 2px; }
.rv-q .q-label { margin: 0; font-size: 14px; }
.rv-q .star-input button { font-size: 26px; min-width: 38px; min-height: 38px; }
.rv-big .q-label { font-size: 16px; }
.rv-big .star-input button { font-size: 34px; min-width: 46px; min-height: 46px; }

/* ── Household sign-up, V1 "split and peek" (12 Oct 2026) ── */
.peek-heart { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--ink-mid); }
.peek-heart svg { fill: none; stroke: #E0457B; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.join-split { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 28px; }
.join-split > form, .join-split > #step-code, .join-split > .join-intro { max-width: 560px; }
.join-intro .lead { margin: 16px 0 8px; }   /* more air under the headline's sun stroke, less above the form (21 Oct 2026) */
.join-peek { display: grid; gap: 12px; }
.join-peek .peek-caption, .join-peek .peek-card { display: none; }
.peek-row { display: flex; gap: 12px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.peek-row .peek-photo { width: 52px; height: 52px; flex: none; }
.peek-row div { display: grid; line-height: 1.3; min-width: 0; }
.peek-row span { font-size: 13px; color: var(--ink-light); }
.peek-photo { border-radius: 50%; object-fit: cover; border: 3px solid var(--sun); box-sizing: border-box; }
.join-peek .stars { color: var(--gold, #D9A030); }
.peek-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.peek-trust li { display: flex; gap: 8px; align-items: flex-start; }
.peek-trust li::before { content: ""; flex: none; width: 14px; height: 8px; margin-top: 5px; border-left: 2.4px solid var(--sage); border-bottom: 2.4px solid var(--sage); transform: rotate(-45deg); }
@media (min-width: 900px) {
  .join-split { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-areas: "intro peek" "main peek"; grid-template-rows: auto 1fr; column-gap: 56px; align-items: start; }   /* rows: the intro takes only its own height, so the code step (intro hidden) sits at the top */
  .join-split > .join-intro { grid-area: intro; }
  .join-split > form, .join-split > #step-code { grid-area: main; }
  .join-peek { grid-area: peek; position: sticky; top: 90px; background: var(--sand-dark); border-radius: 20px; padding: 28px 26px; justify-items: center; gap: 18px; }
  .join-peek .peek-caption { display: block; font-size: 12.5px; color: var(--ink-light); margin-top: -6px; }   /* quiet: so no one takes the example for a real nanny */
  .join-peek .peek-card { display: flex; flex-direction: column; position: relative; width: 100%; max-width: 340px; box-shadow: 0 14px 34px rgba(20, 36, 47, .12); }   /* no tilt, so it stays sharp (19 Oct 2026, like the website) */
  .join-peek .peek-row { display: none; }
  .peek-card .peek-photo { width: 104px; height: 104px; border: 0; }   /* .avatar-lg already draws the sun ring */
  .peek-name { font-size: 21px; }
  .peek-trust { justify-self: stretch; }
}
/* Log in in the same frame: the steps fill the left column; on phones the proof comes after. */
.login-split > #login { max-width: 560px; min-width: 0; }
@media (min-width: 900px) { .login-split > #login { grid-column: 1; grid-row: 1 / span 2; } }
.login-new { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
@media (max-width: 899px) { .login-split .join-peek { display: none; } }   /* returning households know us already */
/* The other front door: one quiet line (12 Oct 2026). */
.door-link { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-light);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; text-align: center; }
.door-link span { flex-basis: 100%; }   /* the question on its own line, the doors side by side under it */
.su-login { text-align: center; margin: 14px 0 0; color: var(--ink-mid); }
.su-login a { font-weight: 600; }
.hs-intro .su-login { text-align: left; margin: 4px 0 0; }   /* under the sign-up headline (30 Oct 2026) */
.door-link a { font-weight: 600; text-decoration: none; }
/* Sign-up: the line under the form heading (21 Oct 2026) */
.join-why { margin-bottom: 14px; }
@media (hover: hover) { .door-link a:hover { text-decoration: underline; } }
.peek-row .peek-row-tag { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-light); }
/* Helper sign-up, first screen: text and ticks, with an example profile beside it on a computer. */
.hs-intro { display: grid; gap: 16px; margin-bottom: 18px; }
.hs-intro .peek-trust { margin-top: 12px; }
.hs-peek { display: none; margin: 0; }
@media (min-width: 760px) {
  .hs-intro { grid-template-columns: minmax(0, 1fr) 210px; align-items: center; column-gap: 28px; padding-top: 24px; }   /* room above the example card (21 Oct 2026) */
  .hs-peek { display: grid; gap: 8px; justify-items: center; }
  .hs-peek .worker-card { position: relative; width: 100%; box-shadow: 0 12px 28px rgba(20, 36, 47, .12); gap: 6px; padding: 18px 12px 14px; }   /* no tilt (19 Oct 2026) */
  .hs-peek .avatar-lg { width: 72px; height: 72px; }
  .hs-peek .stars { color: var(--gold, #D9A030); }
  .hs-peek figcaption { font-size: 12.5px; color: var(--ink-light); }
}
/* Checked or told (13 Oct 2026): checked chips are soft green; each row says who confirmed it,
   or "From <name>" in quiet grey. Strengths and working style keep their grey chips with a green count (less green, 13 Oct). */
.chip.chip-ok { background: var(--sage-light); border-color: transparent; color: var(--fynbos-ink); }
.detail-note.detail-told { color: var(--ink-light); }
.tick-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--sage); color: var(--white); font-size: 11.5px; font-weight: 700; line-height: 1; }
/* Working style as scales (13 Oct 2026): both ends, a green dot, the chosen end in bold. */
.style-scales { display: grid; gap: 22px; margin-top: 14px; }   /* more air between scales (16 Oct 2026) */
.style-scale { display: grid; gap: 10px; }
.style-ends { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--ink-light); line-height: 1.3; }
.style-ends span { max-width: 48%; }
.style-ends span:last-child { text-align: right; }
.style-ends .on { color: var(--ink); font-weight: 600; }
.style-track { position: relative; height: 6px; border-radius: 999px; background: var(--sand-dark); }
.style-track i { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--sage); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--sage); transform: translate(-50%, -50%); }
/* Reviews at scale (13 Oct 2026): a two-way order switch, 5 at a time, top 6 strengths. */
.reviews-more { width: 100%; margin-top: 4px; }
.trait-more { border: 1px dashed var(--line); background: none; font: inherit; font-size: 14px; color: var(--accent); cursor: pointer; }
.trait[hidden] { display: none; }   /* the chip style otherwise overrides "hidden" (strengths beyond the top 6) */
.code-or { margin: 14px 0 6px; font-size: 13.5px; color: var(--ink-light); text-align: center; }
/* Your own helper and paying the difference (13 Oct 2026). */
.delight.delight-sm { padding: 10px 12px; margin: 0; }
.delight.delight-sm .delight-ic { font-size: 22px; }
.co-save > span:last-child { color: var(--fynbos-ink); font-weight: 600; }
.co-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.co-why li { display: flex; gap: 8px; align-items: flex-start; }
.co-why svg { color: var(--sage); flex: none; margin-top: 3px; }
.bk-own { background: var(--sage-light); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; font-size: 14px; color: var(--fynbos-ink); }
.bk-own p { margin: 4px 0 0; color: var(--ink); font-size: 13.5px; }
.own-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.own-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.own-list .home-person { flex: 1 1 auto; text-decoration: none; color: var(--ink); }
.own-list .link-btn { flex-basis: 100%; text-align: left; padding: 0; color: var(--ink-light); }
.a-amount { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; margin: 6px 0; }
.a-amount input { width: 90px; }
.a-inline { display: flex; gap: 8px; align-items: center; margin: 6px 0 10px; }
.a-inline input { flex: 1; min-width: 0; }
/* The public preview of a helper (13 Oct 2026; redone 15 Oct 2026): logged-out visitors with a shared link.
   A soft sea header instead of the landscape band, the good news, then the rest blurred behind a sign-up card. */
.preview-hero { background: linear-gradient(var(--sand-dark), var(--sand) 85%); }
.preview-says { display: grid; gap: 12px; }
.preview-says .basics, .preview-says .traits { margin-top: 0; }
.preview-says .wc-quote { margin: 4px 0 0; }
.preview-lock { position: relative; margin: 0 0 16px; min-height: 360px; }
.preview-ghost { display: grid; gap: 14px; filter: blur(5px); opacity: .7; pointer-events: none; user-select: none; }
.preview-ghost .card { display: grid; gap: 10px; margin: 0; }
.ghost-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ghost-cal i { height: 26px; border-radius: 6px; background: var(--line); }
.ghost-cal i:nth-child(3n+1) { background: var(--sage-light); }
.ghost-line { display: block; height: 10px; border-radius: 5px; background: var(--line); width: 85%; }
.ghost-line.short { width: 55%; }
.preview-gate { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); width: min(380px, calc(100% - 24px)); display: grid; gap: 12px; padding: 22px 20px; margin: 0;
  background: rgba(255, 255, 255, .97); box-shadow: 0 12px 40px rgba(20, 36, 47, .16); border-radius: 16px; }
.preview-gate h2 { margin: 0; font-size: 19px; }
.preview-locked { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink-mid); font-size: 14.5px; }
.preview-locked li { display: flex; align-items: center; gap: 8px; }
.preview-gate .small { margin: 0; text-align: center; }
.preview-how ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: how; }
.preview-how li { counter-increment: how; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-mid); }
.preview-how li b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.preview-how li::before { content: counter(how); flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.preview-side .card { display: grid; gap: 10px; }
/* The card's gap does the spacing; no extra margin under the titles (16 Oct 2026). */
.preview-says .side-title, .preview-side .side-title { margin: 0; }
.preview-side .card > p.small { margin: 0; }
.preview-side .checks p { margin: 0; }
.preview-side .checks-head { margin: 0; }
.preview-side .checks details { margin-top: 2px; }
.preview-side .checks details p { margin-top: 8px; }
@media (max-width: 859px) { .preview-side { display: none; } }

/* Checkout reassurance (13 Oct 2026): launch price pill, agency comparison, safety net by the Pay button. */
.co-launch { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--sage-light); color: var(--fynbos-ink); font-size: 12px; font-weight: 600; vertical-align: middle; }
.co-compare { margin: 8px 0 0; font-size: 13px; color: var(--ink-light); }
.co-fit { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--sage-light); color: var(--fynbos-ink); font-size: 14px; }
.co-fit svg { flex: none; margin-top: 3px; }
.co-safety { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; }
.co-safety-list { display: grid; gap: 6px; }
.co-safety-list { justify-items: center; text-align: center; }
.co-wrong { justify-self: stretch; text-align: left; font-size: 14px; }
.co-wrong summary { cursor: pointer; color: var(--accent); font-weight: 600; text-align: center; list-style: none; }
.co-wrong summary::-webkit-details-marker { display: none; }
.co-wrong summary::after { content: ' ▾'; font-size: 12px; }
.co-wrong[open] summary::after { content: ' ▴'; }
.co-wrong[open] { display: grid; gap: 6px; }
.co-when-sub { margin: 2px 0 0; color: var(--ink-light); }
.bk-was { color: var(--ink-light); font-size: 16px; }
.bk-off { flex-basis: 100%; color: var(--fynbos-ink); font-weight: 700; font-size: 14px; background: var(--sage-light); border-radius: 8px; padding: 6px 10px; }
.co-safety-list .small { margin: 2px 0 0; color: var(--ink-light); }
.co-safety svg { flex: none; margin-top: 2px; }

/* Checkout round (13 Oct 2026): a calmer top - the stepper without a box, centred, with room around the heading. */
.co-stepbar { background: none; border: 0; padding: 8px 0 0; justify-content: center; margin-bottom: 0; }
.co-wrap .page-title { margin: 24px 0 20px; }
/* Booked page: WhatsApp is the one button; My bookings a quiet link beside it. */
.co-next-actions { align-items: center; gap: 16px; }
.co-next-actions .btn { flex: none; white-space: nowrap; }
/* Review pop-up text boxes look like the other fields. */
.sheet textarea { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--white); color: var(--ink); resize: vertical; margin-bottom: 4px; }

/* 13 Oct 2026: lock icon centred on the Pay button; numbered steps line up; room under the stepper. */
.co-pay { display: flex; align-items: center; justify-content: center; gap: 8px; }
.bk-next { list-style: none; padding-left: 0; counter-reset: bk; }
.bk-next li { counter-increment: bk; display: flex; gap: 8px; }
.bk-next li::before { content: counter(bk) "."; flex: none; width: 1.2em; }
.co-stepbar { margin-bottom: 18px; }

/* Booking box price (13 Oct 2026): price and launch pill on one line, what it is underneath. */
/* Her rate for the times picked, above our fee (20 Oct 2026) */
.bk-her-rate { margin: 10px 0 0; font-size: 14px; color: var(--ink-mid); }
.bk-her-rate + .bk-price { margin-top: 6px; }   /* rate and price sit together (21 Oct 2026) */
.bk-her-rate b { color: var(--ink); }
.bk-price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 14px 0 10px; }
.bk-price strong { font-size: 22px; }
.bk-price .co-launch { margin-left: 0; }
.bk-price-what { flex-basis: 100%; font-size: 14px; color: var(--ink-light); }
.wc-numbers strong svg { vertical-align: -2px; margin-right: 4px; color: var(--ink-light); }

/* Space above the footer - ONE rule for every page (13 and 14 Oct 2026; it kept coming back):
   the space belongs to <main>, so a mist page stays mist down to the footer, and on short pages
   the body's flex column keeps the footer at the bottom of the screen. Never set padding-bottom
   (or a padding shorthand) on a page's <main> elsewhere, and never add margins to the last
   button of a page to "clear the footer". Exceptions on purpose: the profile on phones (the
   booking bar), account pages (the phone menu bar) and the search start (landscape on the footer). */
#site-footer { margin-top: 0; }
body > main { padding-bottom: 56px; }
body.search-start > main { padding-bottom: 0; }   /* the landscape sits right on the footer */

/* Past bookings on a phone (13 Oct 2026): date, photo and name on one row, the actions underneath. */
@media (max-width: 640px) { .bk-row { grid-template-columns: auto auto minmax(0, 1fr); } .bk-row-actions { grid-column: 1 / -1; } }

/* Narrow phones (13 Oct 2026): the header's Find help button is just the search icon, so it doesn't run into the name. */
@media (max-width: 420px) { .nav-cta.nav-ic span { display: none; } .nav-cta.nav-ic { padding-left: 11px; padding-right: 11px; } .bk-row-face { text-decoration: none; } }
.bk-row-face { text-decoration: none; }

/* No sideways scrolling on phones (13 Oct 2026): a closed tooltip near the right edge (e.g. the
   day rate on the profile) made the page 50px wider than the screen. Hidden tips take no room,
   and the page clips anything that pokes out. */
html, body { overflow-x: clip; }
.tip:not(.is-open):not(:hover):not(:focus) .tip-bubble { visibility: hidden; }

/* Busy dates (13 Oct 2026): the date boxes and the time-of-day box look like the other fields, two to a row on phones. */
.cal-add { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.cal-add label { display: grid; gap: 4px; min-width: 0; }
.cal-add input, .cal-add select { font: inherit; font-size: 15px; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--white); color: var(--ink); min-width: 0; }
.cal-add .btn { width: 100%; }

/* Cancel a booking (13 Oct 2026): a quiet red link with the free-until date beside it. */
.bk-cancel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 4px; }
.link-danger { color: var(--error); }
/* Referee form: "I have a household profile" = log in first (13 Oct 2026). */
.login-first[hidden], #continue[hidden] { display: none; }
.login-first { background: var(--mist); }
.login-first p { margin: 0 0 10px; }
.login-first .small { margin: 10px 0 0; color: var(--ink-mid); }
/* Admin Reports: where people drop off (13 Oct 2026) */
.a-funnel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.a-funnel h3 { font-size: 15px; margin: 0 0 8px; }
.a-funnel-row { display: grid; grid-template-columns: minmax(0, 11em) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; padding: 3px 0; }
.a-funnel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-funnel-bar { height: 10px; background: var(--mist); border-radius: 999px; overflow: hidden; }
.a-funnel-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.a-funnel-n { min-width: 5.5em; text-align: right; color: var(--ink-mid); }
.a-funnel-n b { color: var(--ink); }

/* ── Find help, option A (13 Oct 2026): a welcome on the landscape, the search card
   sitting on it, the Soon roles as one line, icons on the choices, nannies free this week below. ── */
.search-welcome { background: linear-gradient(var(--sand-dark), var(--sand)); margin-top: -4px; }
.search-welcome .wrap { padding-top: 28px; padding-bottom: 8px; text-align: center; }
.search-welcome .page-title { margin: 0 0 6px; font-size: clamp(26px, 5vw, 38px); text-wrap: balance; }
.search-welcome .lead { margin: 0 auto; color: var(--ink-mid); }
.search-welcome .coast { height: 90px; }
.family-hero.is-compact .search-welcome { display: none; }
body.search-start .family-hero > .wrap { margin-top: -14px; position: relative; }
.search-card { box-shadow: 0 10px 30px rgba(20,36,47,.09); }
.need-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--sand-dark); color: var(--accent); display: grid; place-items: center; font-style: normal; }
.need-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.need-btn, .who-btn { flex-direction: row; align-items: center; gap: 12px; }
.need-btn[aria-pressed=true] .need-ico, .who-btn[aria-pressed=true] .need-ico { background: var(--white); }
/* The role tile matches the "How often" tiles: same size text, padding and width (14 Oct 2026). */
.who { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.who-btn { padding: 12px 14px; }
.who-btn strong { font-size: 15px; }
.who-btn span { font-size: 13px; }
.who-soon { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; color: var(--ink-light); }
.search-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.search-row .search-group { flex: 1 1 220px; display: grid; gap: 6px; }
.search-row .where-select { max-width: none; width: 100%; }
.search-row .search-go { flex: 1 1 220px; margin-top: 0; }
.search-card.is-focus .search-row .search-group:not(.is-on) { display: none !important; }
.search-peek { margin: 18px 0 0; display: grid; gap: 14px; }
.search-peek[hidden] { display: none; }
.peek-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; font-size: 13.5px; color: var(--ink-mid); }
.peek-ticks span { display: inline-flex; align-items: center; gap: 6px; }
.peek-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); }   /* a soft divider from the search above (15 Oct 2026) */
.peek-head h2 { margin: 0; font-size: 18px; }
/* "20 yrs" stays on one line in the numbers strip (14 Oct 2026). */
.wc-numbers strong { white-space: nowrap; }
@media (max-width: 420px) { .need-btn, .who-btn { flex-direction: column; text-align: center; gap: 6px; } .need-btn .need-txt, .who-btn .need-txt { display: flex; } .need-btn .need-txt span, .who-btn .need-txt span { display: none; } }

/* Checkout "When" with different times (14 Oct 2026): runs of days as lines, an hours box per line,
   and a small calendar on request. */
.co-when-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; margin: 0; }
.co-hours-q { display: grid; gap: 10px; }
.co-hours-head { font-weight: 600; font-size: 14px; }
.co-when-head { align-items: baseline; margin-bottom: 10px; }
.co-when-head .co-when-sum { justify-content: flex-start; }
.co-hline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 190px); gap: 6px 12px; align-items: center; }
.co-hline label { display: flex; flex-direction: column; gap: 1px; font-size: 14.5px; min-width: 0; }
.co-hline label span { font-size: 13px; color: var(--ink-light); }
.co-hline input { width: 100%; }
.co-hline input.is-empty { border-color: var(--error); }
@media (max-width: 520px) { .co-hline { grid-template-columns: minmax(0, 1fr); } .co-when-head .co-hours-head { display: none; } }
.co-cal { display: grid; gap: 14px; padding: 4px 0; }
.co-cal[hidden] { display: none; }
/* The small calendar at checkout, scoped so it never shrinks the admin bookings month (14 Oct 2026). */
.co-cal .bc-month p { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.co-cal .bc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 420px; }
.co-cal .bc-dow { font-size: 11px; color: var(--ink-light); text-align: center; }
.co-cal .bc-grid > span { background: none; border: 0; padding: 0; }
.co-cal .bc-day { height: 40px; min-height: 0; border-radius: 8px; font-size: 12px; color: var(--ink-light); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.co-cal .bc-grid > .bc-day.is-on { background: var(--sand-dark); color: var(--soft-ink); font-weight: 700; }
.co-cal .bc-day i { display: flex; gap: 1px; }
.co-cal .bc-day i b { width: 7px; height: 3px; border-radius: 2px; background: rgba(29,94,124,.18); }
.co-cal .bc-day i b.on { background: var(--accent); }
.bc-key { margin: 0; font-size: 12px; color: var(--ink-light); }
/* Booking box: days still needing a time (14 Oct 2026). */
.bk-dates li.bk-need { background: var(--white); border: 1.5px dashed var(--ink-light); border-radius: 10px; padding: 8px 10px; margin: 4px 0; }
.bk-need-tag { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--line); border-radius: 999px; padding: 2px 8px; }
.bk-need-note { margin: 4px 0 8px; font-size: 13.5px; font-weight: 600; color: var(--error); position: relative; padding-left: 16px; }
.contact .bk-need-note { color: var(--error); margin: 4px 0 8px; }   /* beats .contact p (15 Oct 2026: it was grey) */
.bk-need-note::before { content: "↑"; font-weight: 700; position: absolute; left: 0; top: 0; }
.is-flash { animation: bk-flash .9s ease 2; }
@keyframes bk-flash { 50% { box-shadow: 0 0 0 4px rgba(20, 36, 47, .18); } }
@media (prefers-reduced-motion: reduce) { .is-flash { animation: none; } }
/* Admin private note: saves by itself, "Saving..." then "Saved" (14 Oct 2026). */
.a-note-foot { display: flex; align-items: center; gap: 10px; min-height: 0; }
.a-note-status { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--sage); font-weight: 600; }
.a-note-status.is-error { color: var(--error); }
.a-note-status:empty { display: none; }
/* Admin Households (19 Oct 2026): a sortable table, one fact per column; on phones each row is a short card.
   Details open on the right (computer) or underneath (phone). */
.a-ftable { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 14px; }
.a-roles.a-fam-head { margin: 0 0 14px; }
.a-tools.a-fam-head { margin-bottom: 22px; }
.a-ftable { table-layout: fixed; }   /* both groups' columns line up */
.a-ftable th:nth-child(1) { width: 32%; } .a-ftable th:nth-child(2) { width: 20%; } .a-ftable th:nth-child(3) { width: 20%; } .a-ftable th:nth-child(4) { width: 14%; }
.a-ftable td { overflow-wrap: anywhere; }
.a-ftable th { text-align: left; padding: 0; border-bottom: 1px solid var(--line); background: var(--white); }
.a-ftable th button { all: unset; box-sizing: border-box; display: flex; gap: 4px; width: 100%; padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--ink-light); cursor: pointer; white-space: nowrap; }
.a-ftable th button:hover, .a-ftable th[aria-sort] button { color: var(--accent); }
.a-ftable th button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.a-ftable td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.a-ftable tbody tr:first-child td { border-top: 0; }
.a-frow { cursor: pointer; }
.a-frow:hover td { background: var(--mist); }
.a-frow.is-open td { background: var(--sand-dark); }
.a-frow.is-new td { background: #F1F7FA; }
.a-frow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.a-frow strong { font-size: 15px; }
.a-frow .a-meta { margin: 0; }
.a-fc-name .a-bdg { margin-left: 4px; }
.a-fc-email { display: block; }
.a-fc-when { color: var(--ink-light); white-space: nowrap; }
.a-item.is-new { background: #F1F7FA; }   /* a booking since you last looked (20 Oct 2026) */
.a-newdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 2px; }
.a-fbody-row td { padding: 0; }
.a-fbody { padding: 12px 14px 14px; border-top: 1px solid var(--line); background: var(--white); }
@media (max-width: 759px) {
  .a-ftable, .a-ftable tbody { display: block; table-layout: auto; }
  .a-ftable thead { display: none; }
  .a-ftable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
  .a-ftable tbody tr:first-child { border-top: 0; }
  .a-ftable td { display: block; padding: 0; border: 0; min-width: 0; background: none !important; }
  .a-frow.is-new { background: #F1F7FA; }
  .a-frow:hover { background: var(--mist); }
  .a-frow.is-open { background: var(--sand-dark); }
  .a-fc-name { grid-column: 1; grid-row: 1; }
  .a-fc-status { grid-column: 2; grid-row: 1; text-align: right; }
  .a-fc-area { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--ink-light); }
  .a-fc-area .a-meta { display: none; }
  .a-fc-via { grid-column: 1; grid-row: 3; font-size: 13px; color: var(--ink-light); }
  .a-fc-when { grid-column: 2; grid-row: 2; font-size: 12px; text-align: right; }
  .a-ftable tr.a-fbody-row { display: block; padding: 0; }
}
/* Menu count for things that are new since you last looked (19 Oct 2026): an outline, so it doesn't read as a to-do. */
.app-count.app-count-new { background: var(--white); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.app-count-word { display: none; }
@media (min-width: 860px) { .app-count-word { display: inline; } }
.a-bdg { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--mist); color: var(--ink-mid); white-space: nowrap; }
.a-bdg-good { background: var(--sage-light); color: var(--fynbos-ink); }
.a-bdg-sea { background: var(--sand-dark); color: var(--soft-ink); }
.a-fbody { padding: 12px 14px 14px; border-top: 1px solid var(--line); background: var(--white); }
/* Admin Reports A (14 Oct 2026). */
.a-rep-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.a-rep-head .a-group-title { margin: 0; }
.a-period { margin: 0; }
.a-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 700px) { .a-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-kpi { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.a-kpi b { font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.a-kpi span { font-size: 13px; color: var(--ink-mid); }
.a-kpi .a-kpi-d { font-size: 12px; font-weight: 600; color: var(--fynbos-ink); }
.a-kpi .a-kpi-d.is-flat, .a-kpi .a-kpi-d.is-down { color: var(--ink-light); }
.a-rep-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 760px) { .a-rep-two { grid-template-columns: minmax(0, 1fr); } }
.a-rep-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.a-rep-card h3 { margin: 0; font-size: 15px; }
.a-rep-card .a-meta { margin: 0; }
.a-stack { display: flex; height: 28px; border-radius: 8px; overflow: hidden; gap: 2px; }
.a-seg { border: 1.5px solid transparent; display: grid; place-items: center; font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; }
.a-stack .a-seg { border-radius: 6px; }
.a-seg.a-sb-waitlist { background: var(--white); border-color: var(--line); }
.a-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12.5px; color: var(--ink-mid); }
.a-legend span { display: inline-flex; align-items: center; gap: 5px; }
.a-legend i.a-seg { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.a-fsteps { display: grid; gap: 4px; }
.a-rep-fold { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 4px; }
.a-rep-fold summary { font-weight: 700; cursor: pointer; }
.a-rep-fold .a-facts { margin-top: 10px; }
.results-note { margin: 0 0 12px; }
/* The real lock emoji on the Pay button (14 Oct 2026, to match the mockups). */
.co-lock { font-size: 15px; line-height: 1; }

/* Helper panel tabs (14 Oct 2026) */
/* Her roles at the top of About (26 Oct 2026): chips, a tick for an approved reference, a pencil to change them. */
.a-roles-top { margin: 0 0 12px; }
.a-role-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.a-role-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); font-size: 13px; font-weight: 600; color: var(--ink); }
.a-role-chip .ui-ic { color: var(--ink-light); }
.a-role-chip .a-role-ok { display: inline-grid; color: var(--fynbos-ink); }
.a-role-chip .a-role-ok .ui-ic { color: inherit; }
.a-role-chip.is-closed { background: var(--mist); color: var(--ink-light); font-weight: 500; }
.a-role-chip small { font-size: 11.5px; font-weight: 400; }
.a-role-pen, .a-mini-pen { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 0; vertical-align: middle; }
.a-mini-pen { width: 24px; height: 24px; margin-left: 2px; }
.a-role-pen:hover, .a-mini-pen:hover { background: var(--mist); }
.a-roles-top .a-roles-box { margin-top: 8px; }
.a-roles-box[hidden] { display: none; }
.a-role-change { margin: 14px 0 4px; }
.a-role-change > summary { list-style: none; cursor: pointer; display: inline; font-size: 13.5px; }
.a-role-change > summary::-webkit-details-marker { display: none; }
/* Change role (end of About) and Send welcome again (top of WhatsApp) are quiet grey links (20 Oct 2026; moved into the tabs 22 Oct 2026). */
.a-role-change > summary.link-btn, .a-welcome .link-btn { color: var(--ink-mid); font-size: 13.5px; font-weight: 500; }
.a-welcome { margin: 0 0 10px; }
.a-welcome .link-btn .ui-ic { width: 15px; height: 15px; }
.mc-today-btn { font-size: 13px; font-weight: 500; margin-right: 8px; vertical-align: 1px; }
.a-roles-box { display: grid; gap: 6px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.a-role-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.a-roles-box .btn { justify-self: start; margin-top: 4px; }
.a-ptabs { display: flex; flex-wrap: wrap; column-gap: 18px; border-bottom: 1px solid var(--line); margin: 14px 0 12px; }   /* wraps on phones, no sideways scroll (17 Oct 2026) */
.a-ptab { font: inherit; font-size: 13.5px; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 0; margin-bottom: -1px; color: var(--ink-mid); cursor: pointer; white-space: nowrap; }
.a-ptab:hover { color: var(--accent); }
.a-ptab.is-on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.a-ppane > .a-fold:first-child { border-top: 0; }
.a-ppane .a-note-box { margin-top: 0; }
.a-code { font: 12px/1.4 ui-monospace, Menlo, monospace; color: var(--ink-mid); background: none; border: 1px dashed var(--border-strong); border-radius: 6px; padding: 0 6px; cursor: pointer; }
.a-code:hover { border-color: var(--accent); color: var(--accent); }
.a-stars { color: var(--gold); }
.a-danger-row { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; font-size: 13px; }

/* The chosen helper or household slides over the page from the right (14 Oct 2026),
   so the list never narrows and nothing jumps. */
.a-detail.a-drawer { position: fixed; top: var(--hdr, 64px); right: 0; bottom: 0; width: min(580px, 46vw); max-height: none;
  border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: -10px 0 30px rgba(20,36,47,.12);
  z-index: 30; padding: 18px 22px 28px; overflow-y: auto; overscroll-behavior: contain; }
.a-drawer.a-drawer-new { animation: a-drawer-in .18s ease-out; }
@keyframes a-drawer-in { from { transform: translateX(24px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .a-drawer.a-drawer-new { animation: none; } }

/* Working style dots, E2 (14 Oct 2026) */
.ws-box { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px 10px; margin-top: 10px; background: var(--mist); }   /* soft mist so each question stands apart (16 Oct 2026) */
.ws-box.is-next { border-color: var(--accent); }
.ws-ends { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; line-height: 1.3; color: var(--ink-light); margin-top: 4px; }
.ws-ends span { max-width: 48%; }
.ws-ends span:last-child { text-align: right; }
.ws-ends .on { color: var(--ink); font-weight: 700; }
.ws-dots { display: flex; justify-content: space-between; align-items: center; position: relative; margin: 12px 4px 0; }
.ws-dots::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; background: var(--line); }
.ws-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--white); position: relative; cursor: pointer; padding: 0; }
.ws-dot-sm { width: 24px; height: 24px; }
.ws-dot[aria-pressed=true] { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--sand-dark); }
.ws-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ws-words { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-light); margin: 4px 0 0; }
.ws-words span { width: 40px; text-align: center; }

/* Choose many = square tick box, choose one = round dot (14 Oct 2026) */
.q-card .choices[data-multi] .choice:not(.mini), .q-card .choices[data-key]:not([data-multi]) .choice, .q-card .choices[data-q]:not([data-multi]) .choice { display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.q-card .choices[data-multi] .choice:not(.mini)::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 4px; border: 2px solid var(--border-strong); background: var(--white); box-sizing: border-box; }
.q-card .choices[data-multi] .choice[aria-pressed=true]:not(.mini)::before { content: "\2713"; border-color: var(--white); color: var(--accent); font-size: 12px; font-weight: 800; line-height: 12px; text-align: center; }
.q-card .choices[data-key]:not([data-multi]) .choice::before, .q-card .choices[data-q]:not([data-multi]) .choice::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--white); box-sizing: border-box; }
.q-card .choices[data-key]:not([data-multi]) .choice[aria-pressed=true]::before, .q-card .choices[data-q]:not([data-multi]) .choice[aria-pressed=true]::before { border: 5px solid var(--white); background: var(--accent); }
.chosen-n { font-size: 13px; font-weight: 600; color: var(--ink-mid); margin: 6px 0 0; }
/* Sign-up examples quieter than the questions (16 Oct 2026). */
.q-card textarea::placeholder { font-size: 13.5px; color: var(--ink-light); }

/* Helper calendar, simpler (14 Oct 2026) */
.cal-edit .cal-free { color: var(--white); }
.cal-edit .cal-taken { color: var(--ink-mid); }
.cal-start { display: flex; align-items: center; gap: 8px; background: var(--sand); border-radius: 10px; padding: 8px 12px; font-size: 14px; margin: 0 0 10px; }
.mc-own .mc-day { position: relative; }
.mc-own .mc-day .mc-b-mon { font-size: 11px; white-space: nowrap; line-height: 1.45; }   /* "1 Nov" when two months share a page (28 Oct 2026) */
.mc-own .mc-day.mc-tap { cursor: pointer; }
.mc-own .mc-busyday { background: repeating-linear-gradient(135deg, var(--grey-light) 0 4px, #DDE3E7 4px 8px); }
.mc-own .mc-sel { box-shadow: 0 0 0 2px var(--accent); border-radius: 8px; }
.mc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.mc-own .mc-day .mc-dot { position: absolute; top: 3px; right: 3px; }
.mc-key-busy { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: repeating-linear-gradient(135deg, var(--grey-light) 0 3px, #C9D2D8 3px 6px); }
.cal-check { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 14px; }
.cal-check .btn { margin: 0; padding-left: 6px; padding-right: 6px; }
.day-panel { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.day-panel h3 { margin: 0 0 8px; font-size: 16px; }
.day-bk { background: var(--sand); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-bottom: 8px; }
.day-bk strong { display: block; }
.day-busy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.day-busy .choice { font-size: 13px; padding: 7px 4px; text-align: center; }
.busy-range { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.busy-range h3 { margin: 0; font-size: 16px; }
.busy-range .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.busy-range label { display: grid; gap: 4px; min-width: 0; }
.busy-range input { width: 100%; min-width: 0; font: inherit; font-size: 15px; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--white); color: var(--ink); }   /* like the other inputs (16 Oct 2026) */
.away-err { margin: 0; color: var(--error); font-size: 13px; font-weight: 500; }
.away-err[hidden] { display: none; }
.busy-range[hidden] { display: none; }

/* Bigger menu icons on phones (14 Oct 2026); a helper's photo as her Profile icon */
.app-nav-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--line); }
.app-nav a[aria-current=page] .app-nav-img { box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--accent); }
@media (max-width: 859px) {
  .app-nav a { font-size: 13px; }
  .app-nav a svg { width: 26px; height: 26px; }
  .app-nav-img { margin: 2px 0 1px; }
}
.acc-link-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; font: inherit; font-size: 15px; color: var(--accent); background: none; border: 0; border-top: 1px solid var(--line); text-decoration: none; cursor: pointer; text-align: left; }
.acc-link-row:first-child { border-top: 0; }
.plain-lines { margin: 0 0 8px; padding-left: 18px; }
.busy-more summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-top: 8px; }
/* Behind the panel: catches a tap outside it and closes the panel (14 Oct 2026). */
.a-backdrop { position: fixed; inset: 0; z-index: 29; background: rgba(20,36,47,.06); cursor: default; }
/* Helper and household rows that open the panel show a hand (14 Oct 2026). */
@media (min-width: 1180px) { .a-panel .a-item[data-worker], .a-panel [data-fam-row] { cursor: pointer; } }

/* No scroll lock while the side panel is open (27 Oct 2026): with the page's sideways clip it never
   locked, and it let the left menu scroll away. The list behind the panel scrolls as before. */
.mc-own .mc-bars i.off { background: repeating-linear-gradient(135deg, var(--grey-light) 0 2px, #9AA7AF 2px 4px); }
.cal-ok { display: flex; align-items: center; gap: 6px; color: var(--fynbos-ink); margin: 0 0 12px; font-weight: 600; }
.quiet-done { margin: 0; }
/* "Your first reference is in" on helper Home (20 Oct 2026) */
.ref-in { border: 2px solid var(--accent); display: grid; gap: 12px; }
.ref-in h2, .ref-in p { margin: 0; }
.ref-peek { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.ref-peek-line { width: 100%; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; display: grid; gap: 2px; text-align: left; font-size: 14px; }
.ref-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; margin-right: 6px; }
.ref-in-links { text-align: center; font-size: 14px; }
.ref-in-why { text-align: center; }
.delight-cta .btn { margin-top: 10px; }
.delight-cta > div { flex: 1; }
.a-eye { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--accent); flex: none; }
.a-eye:hover { background: var(--accent-soft, #E6EFF4); }
/* Reports: "Ready" was white in the stage bar (14 Oct 2026). Light green stripes with a green
   edge: on the way to Live (soft green), like the green outline of the Ready button. */
.a-seg.a-sb-ready { background: repeating-linear-gradient(135deg, var(--white) 0 5px, var(--sage-light) 5px 10px); border-color: var(--sage); color: var(--fynbos-ink); }
.a-row-end { display: inline-flex; align-items: center; gap: 6px; flex: none; }
/* Phones (23 Oct 2026): a booking card's names get the full width; the eye and status go on the line under them. */
@media (max-width: 640px) { .a-item[data-booking-id] > .a-row { flex-wrap: wrap; row-gap: 6px; } .a-item[data-booking-id] > .a-row > span:first-child { flex: 1 1 100%; } }

/* ── Free guides (15 Oct 2026): /guides/<slug>, words in data/guides.js ── */
/* White cards on a soft tinted page, so each section stands out (15 Oct 2026). */
body:has(.guide-page) { background: var(--page-tint); }
main.wrap.guide-page { max-width: 1040px; }
.g-top { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; }
.guide-page .brand-tag { margin-top: 12px; }
.g-head, .g-body { max-width: 680px; }
.g-sec { padding: 20px 20px 16px; scroll-margin-top: 20px; }
.g-sec:last-child { margin-bottom: 0; }
.g-h { display: flex; align-items: center; gap: 10px; font-size: 19px; margin: 0 0 12px; }
.g-ic { font-size: 20px; line-height: 1; }
.g-sec p { margin: 0 0 10px; }
.g-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-light); margin: 16px 0 6px !important; }
.g-label:first-of-type { margin-top: 4px !important; }
.g-list, .g-checks, .g-steps, .g-inside { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 9px; }
.g-list li, .g-checks li { position: relative; padding-left: 20px; line-height: 1.5; }
/* Checklists: plain bullets on screen (squares looked tappable, 19 Oct 2026); an empty square to tick only on paper. */
.g-list li::before, .g-checks li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media print {
  .g-checks li { padding-left: 26px; }
  .g-checks li::before { left: 0; top: .28em; width: 13px; height: 13px; border: 1.6px solid var(--accent); border-radius: 3px; background: none; }
}
/* Who can give a reference (29 Oct 2026): a tick for who counts, a grey cross for who doesn't. */
.g-yes, .g-no { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 7px; }
.g-yes li, .g-no li { position: relative; padding-left: 26px; line-height: 1.5; }
.g-yes li::before, .g-no li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.g-yes li::before { content: "\2713"; color: var(--fynbos-ink); }
.g-no li::before { content: "\2715"; color: var(--ink-light); }
.g-no li { color: var(--ink-mid); }
/* Steps are a plain numbered list (29 Oct 2026: calmer than numbers in circles). */
.g-steps { list-style: decimal; padding-left: 22px; }
.g-steps li { line-height: 1.5; padding-left: 4px; }
.g-steps li::marker { font-weight: 700; color: var(--ink); }
/* Numbered tips: the circles moved here from the steps (29 Oct 2026). A sub-tip carries on the one before, unnumbered. */
.g-numbered { counter-reset: tip; }
.g-numbered .g-tip:not(.g-tip-sub) { counter-increment: tip; display: flex; align-items: center; gap: 10px; }
.g-numbered .g-tip:not(.g-tip-sub)::before { content: counter(tip); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sand-dark); color: var(--accent); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.g-tip-sub { border-top: 0; padding-top: 0; margin-top: 16px; font-size: 15px; }
.g-quote { border-left: 3px solid var(--sun); padding: 2px 0 2px 12px; font-family: var(--font-heading); color: var(--ink); }
.g-notes { display: none; }
/* Guide extras (29 Oct 2026): tip headings, her own links, and how a shared link looks on WhatsApp or Facebook. */
.g-tip { font-size: 16.5px; margin: 22px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.g-sec > p:first-of-type + .g-tip { border-top: 0; padding-top: 0; margin-top: 14px; }
.g-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 12px; }
.g-share-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.g-share-wa { background: #25D366; }
.g-share-fb { background: #1877F2; }
.g-share a { display: block; border-radius: 50%; }
.g-share { gap: 10px; }
.g-mine .btn { width: auto; margin: 0; }
.g-mine:empty { display: none; }
.g-pv { margin: 4px 0 14px; }
.g-pv figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.g-pv-bubble, .g-pv-post { display: block; max-width: 340px; font-size: 14px; line-height: 1.4; color: #111b21; }
.g-pv-whatsapp { background: #EFEAE2; border-radius: 12px; padding: 12px; }
.g-pv-bubble { margin-left: auto; background: #D9FDD3; border-radius: 10px 2px 10px 10px; padding: 4px 4px 8px; }
.g-pv-post { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 10px 0 0; overflow: hidden; }
.g-pv-card { display: block; border-radius: 7px; overflow: hidden; background: rgba(0,0,0,.05); }
.g-pv-post .g-pv-card { border-radius: 0; background: #F0F2F5; }
.g-pv-card img { display: block; width: 100%; height: auto; }
.g-pv-draw { position: relative; display: flex; align-items: center; gap: 14px; aspect-ratio: 1200 / 630; padding: 28px 16px 30px; background: var(--white); overflow: hidden; }
.g-pv-draw::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(var(--hill-back) 0 45%, var(--sand-dark) 45%); border-radius: 60% 40% 0 0 / 30% 30% 0 0; }
.g-pv-logo { position: absolute; top: 8px; left: 10px; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; }
.g-pv-draw .avatar-lg { width: 64px; height: 64px; font-size: 22px; flex: none; }
.g-pv-info { display: grid; gap: 2px; min-width: 0; }
.g-pv-info b { font-size: 19px; line-height: 1.1; }
.g-pv-info span { font-size: 11px; color: #54656f; }
.g-pv-info .g-pv-ok { display: flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink); }
.g-pv-ok svg { width: 13px; height: 13px; flex: none; }
.g-pv-words { display: grid; gap: 2px; padding: 7px 9px 8px; }
.g-pv-words span { font-size: 13px; color: #54656f; }
.g-pv-words small { font-size: 12px; color: #667781; }
.g-pv-msg { display: block; padding: 6px 6px 0; overflow-wrap: anywhere; }
.g-pv-post .g-pv-msg { padding: 8px 12px 10px; }
.g-pv-who { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-weight: 600; }
.g-pv-who i { width: 30px; height: 30px; border-radius: 50%; background: var(--sand-dark); color: var(--accent); font-style: normal; font-size: 13px; display: grid; place-items: center; }
.g-inside li { display: flex; gap: 10px; align-items: center; }
.g-gate .btn { margin: 14px 0 10px; }
.g-foot { margin-top: 18px; }
/* Contents: on a computer a sticky list on the left (like the website's articles), the section you're reading highlighted. */
.g-toc { display: none; }
@media (min-width: 1000px) {
  .g-layout { display: grid; grid-template-columns: 240px minmax(0, 680px); gap: 40px; align-items: start; }
  .g-toc { grid-column: 1; grid-row: 1; }
  .g-body { grid-column: 2; }
  .g-head { margin-left: 280px; }
  .g-toc { display: block; position: sticky; top: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
  .g-toc p { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-light); margin: 0 0 10px; }
  .g-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
  .g-toc a { display: flex; gap: 8px; align-items: baseline; }
  .g-toc a span { flex: none; width: 18px; text-align: center; }
  .g-toc a { color: var(--ink-mid); text-decoration: none; }
  .g-toc a:hover, .g-toc a.current { color: var(--accent); }
  .g-toc a.current { font-weight: 700; }
}

@media print {
  #site-header, #site-footer, .g-top, .g-toc, .test-banner, .wa-help { display: none !important; }
  body, body:has(.guide-page) { background: #fff; }
  body > main { padding-bottom: 0; }
  .g-layout { display: block; }
  .g-sec { border: 0; padding: 0; margin: 0 0 18px; break-inside: avoid-page; }
  .g-h { break-after: avoid; }
  /* On paper: a few lines for the household's own notes under each section. */
  .g-notes { display: block; margin-top: 10px; }
  .g-notes span { display: block; font-size: 12px; color: #666; }
  .g-notes i { display: block; height: 72px; background: repeating-linear-gradient(to bottom, transparent 0 23px, #bbb 23px 24px); }
  .g-foot a { color: inherit; }
}
.g-card-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sun-soft); display: grid; place-items: center; font-size: 22px; }
.guide-cards .muted { display: block; margin-top: 2px; }
/* Guide pictures (19 Oct 2026): the website's drawings; their pink stays inside the pictures. */
.g-card-art { flex: none; width: 88px; height: 44px; border-radius: 10px; object-fit: cover; }
.g-art { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: 16px; margin: 0 0 18px; } /* the full width of the guide (19 Oct 2026) */
@media print { .g-art { display: none; } }
@media (max-width: 859px) { .app-nav a.app-nav-wide { display: none; } }

/* Thin whale strip on helper profiles (15 Oct 2026): about half the old height. */
.coast.coast-thin { height: clamp(40px, 4.5vw, 64px); }

/* Loading skeletons (15 Oct 2026): grey shapes with a gentle shimmer instead of "Loading...". */
.sk { display: block; background: var(--line); border-radius: 8px; position: relative; overflow: hidden; max-width: 100%; }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: translateX(-100%); animation: sk-shine 1.4s infinite; }
@keyframes sk-shine { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }
.sk-c { margin: 0 auto 10px; }
.sk-pill { border-radius: 999px; }
.sk-photo { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 14px; }
.sk-wrap { display: grid; gap: 14px; width: 100%; }
.sk-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: grid; gap: 10px; }

/* Account screens (households, helpers, admin) on the page tint, so each white card stands out (15 Oct 2026, same colour as the guides). */
body.in-app { background: var(--page-tint); }
/* Sign-ups, references and logins sit on the same soft tint, so each white question card stands out (15 Oct 2026). */
body:has(main.referee), body:has(main.signup) { background: var(--page-tint); }

/* Preview: basics and strengths side by side on a computer, the quote underneath (15 Oct 2026). */
.says-cols { display: grid; gap: 16px; }
.says-cols .layer-note { margin: 0 0 10px; }
.says-strengths .basic-label { flex: 1; }
@media (min-width: 860px) { .says-cols.says-two { grid-template-columns: 1fr 1fr; gap: 24px; } }
/* Preview (16 Oct 2026): basics alone sit two by two on a computer instead of squeezed into half the card. */
@media (min-width: 860px) { .preview-says .says-cols:not(.says-two) .basics { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.sk-page { margin: 32px auto; padding: 0; display: grid; gap: 22px; width: min(600px, calc(100vw - 32px)); max-width: 100%; box-sizing: border-box; }

/* The round button top right shows the person's photo or initials (15 Oct 2026). */
.nav-me-own { overflow: hidden; background: var(--sand-dark); color: var(--soft-ink); font-weight: 700; font-size: 13px; border-color: var(--sand-dark); }
.nav-me-own img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .hide-phone { display: none !important; } }
@media (min-width: 641px) { .only-phone { display: none !important; } }   /* its partner (28 Oct 2026) */

/* Helper calendar, option A (15 Oct 2026): one colour per meaning, and a booked day gets a soft blue
   cell so it stands out from free days even when the bars are tiny. */
.mc-bars i.bk { background: var(--accent); }
.mc-key-bar.bk { background: var(--accent); }
/* Booked days: a soft blue cell, no edge (an edge looked like "selected"). The chosen day is white
   with a blue ring, and keeps its colours. */
.mc-own .mc-booked { background: #D3E4EC; }
.mc-own .mc-sel, .mc-own .mc-sel.mc-booked { background: var(--white); color: var(--ink); box-shadow: 0 0 0 2.5px var(--accent); }
.mc-own .mc-sel .mc-bars i { background: var(--line); }
.mc-own .mc-sel .mc-bars i.on { background: var(--sage); }
.mc-own .mc-sel .mc-bars i.bk { background: var(--accent); }
.mc-own .mc-bars i { height: 7px; }
.mc-which { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; color: var(--ink-light); font-size: 11px; }
.mc-which .mc-bars { width: 114px; }
.mc-which > span { display: grid; grid-template-columns: repeat(3, 38px); text-align: center; }
.dp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.dp-row:first-of-type { border-top: 0; }
.dp-row b { font-size: 15px; }
.dp-right { display: inline-flex; align-items: center; gap: 10px; }
.dp-word { font-size: 14px; font-weight: 600; color: var(--ink-light); }
.dp-word.dp-on { color: var(--sage); }
.dp-word.dp-bk { color: var(--accent); }
.dp-booked .day-bk { flex-basis: 100%; margin: 0; font-size: 14px; }
.dp-switch { width: 48px; height: 28px; border-radius: 999px; border: 0; padding: 0; background: var(--line); position: relative; cursor: pointer; flex: none; }
.dp-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(20, 36, 47, .25); transition: left .15s; }
.dp-switch[aria-checked="true"] { background: var(--sage); }
.dp-switch[aria-checked="true"]::after { left: 23px; }
.dp-switch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dp-switch::after { transition: none; } }
.cal-readback { margin: 10px 0 0; font-size: 14px; }
.cal-readback b { color: var(--sage); }
.cal-cancel { margin: 10px 0 0; text-align: center; }
.me-status.is-saved { color: var(--fynbos-ink); font-weight: 600; }
.only-check { background: #FDF0E3; border-left: 3px solid #C9752A; border-radius: 12px; padding: 12px 14px; margin-top: 12px; }   /* soft orange so it isn't missed (26 Oct 2026), like the calendar notes */
.only-check p { margin: 0 0 10px; font-weight: 600; }
.only-check p.small { margin-top: -6px; font-weight: 400; color: var(--ink-mid); }
.only-check .step-actions { margin: 0; }
/* Today on the helper's month: the date in a small blue circle, not a ring round the day (a ring means "chosen"). */
.mc-own .mc-today:not(.mc-sel) { box-shadow: none; }
.mc-own .mc-today > b { background: var(--accent); color: var(--white); border-radius: 999px; min-width: 22px; padding: 0 5px; line-height: 20px; }
/* "Every Tuesday or only this date?" under the time she switched (15 Oct 2026). */
.dp-ask { flex-basis: 100%; background: var(--sand); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.dp-ask p { margin: 0; font-weight: 600; }
.dp-ask .link-btn { justify-self: center; color: var(--ink-light); }
/* Checkout (15 Oct 2026): her day rate is quieter, so the only big amount is what you pay us. */
.co-rate > span:last-child { color: var(--ink-light); font-weight: 400; }
/* A tooltip's text is always white on its dark bubble, whatever the row around it sets (15 Oct 2026). */
.tip .tip-bubble { color: var(--white); }
/* Household Home (15 Oct 2026): a quiet "Tell us ›" / "See regular help ›" link, and Your helpers as tidy rows. */
.card-more { color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.home-cards a.card-more { color: var(--accent); }
.own-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.own-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.own-rows .home-person { min-width: 0; }
.own-rows .home-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.own-rows .own-book { flex: none; font-size: 14px; font-weight: 600; color: var(--accent); }
.home-cards .own-rows a.own-book { color: var(--accent); text-decoration: underline; }
.reg-row .link-btn { display: block; padding: 0; margin-top: 2px; color: var(--ink-light); }
.bk-range-one { grid-template-columns: 1fr; max-width: 220px; }
.wc-mine { justify-self: center; display: inline-block; margin: 2px auto 0; padding: 2px 10px; border-radius: 999px; background: var(--sage-light); color: var(--fynbos-ink); font-size: 12.5px; font-weight: 600; }
.need.need-missing .need-btn { border-color: var(--error); }
.need-msg { display: block; margin: 6px 0 0; }
/* Regular tab rows have no date tile: face, name, Book free. */
.bk-row.reg-row { grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 640px) { .bk-row.reg-row { grid-template-columns: auto minmax(0, 1fr) auto; } .reg-row .bk-row-actions { grid-column: auto; } }
.reg-row .bk-row-main { display: grid; gap: 2px; }
/* "Works for you" in the card's top-left corner, opposite the heart (15 Oct 2026). */
.worker-card { position: relative; }
.worker-card .wc-mine { position: absolute; top: 12px; left: 12px; margin: 0; }
/* Household Home: three cards a row on a computer, two on a tablet, one on a phone (15 Oct 2026: four felt squished). */
@media (min-width: 700px) { .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .home-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Next booking on household Home (15 Oct 2026): a calendar tile beside who and when. */
.home-next-row { display: flex; gap: 14px; align-items: center; }
.home-next-row .bk-tile { width: 58px; flex: none; }
.home-next-main { display: grid; gap: 4px; min-width: 0; }
.home-next-main .home-person strong { font-size: 16px; }
.home-next-when { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--fynbos-ink); }
.home-next-when svg { color: var(--sage); }
/* Hours, one date per line. */
ul.bk-hours { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-mid); }
ul.bk-hours li span { display: inline-block; min-width: 82px; color: var(--ink-light); }
span.bk-hours { display: block; font-size: 13.5px; color: var(--ink-mid); margin-top: 2px; }
.co-row-d ul.bk-hours { margin: 0; text-align: right; }
/* In a details row the hours read like the other answers: bold ink (29 Oct 2026). */
.co-row-d span.bk-hours, .co-row-d ul.bk-hours { margin-top: 0; font-size: inherit; color: var(--ink); }
.co-row-d ul.bk-hours li span { min-width: 0; margin-right: 6px; }

/* Help page (15 Oct 2026): two tabs, questions that fold open. */
.help-tabs { margin: 8px 0 18px; }
.help-group { font-size: 15px; font-weight: 700; color: var(--ink-mid); margin: 22px 0 8px; }
.faq { background: var(--white); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.faq summary { cursor: pointer; padding: 13px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-weight: 700; }
.faq[open] summary::after { content: '\2212'; }
.faq > p, .faq > ol, .faq > ul { margin: 0 16px 14px; color: var(--ink-mid); }
.faq > ul, .faq > ol { padding-left: 36px; }
.help-more { margin-top: 24px; }

/* Booking box: one row of times for all picked days, own-household line (15 Oct 2026) */
.bk-yours { margin: 0 0 6px; }
.bk-repeat-sum .tip { margin-left: 4px; }
.bk-title { display: flex; align-items: center; gap: 8px; }
.bk-reset { margin-left: auto; border: 0; background: none; color: var(--accent); font-size: 20px; line-height: 1; padding: 6px 8px; cursor: pointer; border-radius: 50%; }
.bk-reset:hover { background: var(--mist, #F4F8FA); }
.bk-range .bk-label > span { display: inline-flex; align-items: center; gap: 4px; }
.co-loading { padding-top: 32px; }
/* Soft orange, like the profile's "not confirmed recently" note: easy to miss otherwise (18 Oct 2026). */
.bk-some { margin: 10px 0 0; background: #FDF0E3; color: var(--ink); border-radius: 10px; padding: 10px 12px; }
.bk-far .link-btn { font-size: inherit; padding: 0; text-decoration: underline; }
.a-worried, .a-worried strong { color: var(--error); }
.dp-until { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.dp-until label { display: grid; gap: 4px; }
.dp-until input { font: inherit; padding: 8px; border: 1px solid var(--border-strong); border-radius: 8px; }

/* Round of 15 Oct 2026 */
/* Phones: the bottom bar is icons only; the words stay for screen readers. */
@media (max-width: 859px) {
  .app-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app-side { padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .app-count { top: -4px; }
}
/* Computer: "Find help" is a button in the household menu, so the header's one steps aside. Phones keep the header's search button. */
.app-cta { display: none; }
@media (min-width: 860px) {
  .app-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; margin: 10px 12px 0; }
  .in-app:has(.app-cta) .nav-cta { display: none; }
}
/* Booking cards: photo and name on one line; on phones the days and hours run the full width under the date. */
.bk-person { align-items: center; }
.bk-person h2 { margin: 0; }
.bk-when p { margin: 0; }
.bk-next-top { padding-right: 44px; }   /* clear of the eye button */
@media (max-width: 640px) {
  .bk-next-grid { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 14px; }
  .bk-next-grid .bk-tile { width: 56px; grid-row: 1 / span 2; }
  .bk-next-body { display: contents; }
  .bk-when, .bk-next-body > .bk-actions, .bk-next-body > .what-row { grid-column: 1 / -1; }
  .bk-next-card .bk-person .avatar-md { width: 44px; height: 44px; }
}
/* Regular helpers: the "No longer works for us" link sits under the name, not in the middle. */
.reg-row .bk-row-main .link-btn { justify-self: start; text-align: left; padding-left: 0; padding-right: 0; }
.reg-row .bk-row-actions { align-items: center; flex-wrap: nowrap; }
/* A new booking stands out until she taps "Got it" (15 Oct 2026) */
.bk-request[data-booking] { border: 2px solid var(--accent); }
.bk-request [data-seen] { display: flex; align-items: center; justify-content: center; gap: 8px; }
@media (max-width: 520px) { .co-next-actions .btn { flex: 1 1 100%; } }   /* WhatsApp and My bookings, one under the other */
.bk-only { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--sand-dark); color: var(--soft-ink); font-size: 14px; font-weight: 600; }
.bk-only > svg { flex: none; }
/* Booking dates, one per line (15 Oct 2026) */
.when-lines { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.when-lines li { padding: 8px 12px; background: var(--mist); border-radius: 10px; }
.when-lines b { font-weight: 700; margin-right: 4px; }
/* No footer inside the logged-in frame, on phones too (15 Oct 2026): it sat oddly above the bottom bar. Its links end the page instead. */
.in-app #site-footer { display: none; }
.app-links-phone { margin: 28px 0 0; text-align: center; font-size: 13px; color: var(--ink-light); }
.app-links-phone a { color: var(--ink-light); }
@media (min-width: 860px) { .app-links-phone { display: none; } }

/* Helper Home: her usual free times in words (15 Oct 2026). Green dots match the calendar's free bars. */
.free-say { font-weight: 600; margin: 0 0 6px; }
.free-lines { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.free-lines li { display: flex; gap: 8px; align-items: baseline; }
.free-lines li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex: none; transform: translateY(-1px); }
.free-act { display: grid; gap: 10px; justify-items: center; margin: 12px 0 14px; }
.free-act .btn { width: 100%; margin: 0; }
.free-change { margin: 4px 0 14px; }
.free-card #home-month:empty { display: none; }

/* Dropdowns (15 Oct 2026): our own arrow, the same distance from the edge on every computer and phone. */
select:not([multiple]) {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A5A65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
  padding-right: 34px !important;
}
/* "Which times?" needs at least one (15 Oct 2026). */
.times-q .times-msg { margin-top: 6px; }
.times-q.has-error .times-msg { display: block; }

/* Experience and qualifications, tightened D (15 Oct 2026): one line per item, the source on the same line. */
.xq { display: grid; gap: 0; }
.xq-row { padding: 18px 0; border-top: 1px solid var(--line); }   /* a little more room (28 Oct 2026) */
.xq-row:first-child { padding-top: 0; border-top: 0; }
.xq-row:last-child { padding-bottom: 0; }
.xq-row h3, .layer h3.sub-label { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px; }
/* "The basics" and "Working style" match "Experience" (16 Oct 2026). */
.sub-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sub-head .sub-label { margin: 0; }
.sub-src { font-size: 13px; color: var(--sage); font-weight: 500; text-transform: none; letter-spacing: 0; }
.layer h3.sub-label .tip { text-transform: none; letter-spacing: 0; }
.xq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.xq-line { display: flex; gap: 10px; align-items: center; font-size: 15px; line-height: 1.4; }
.xq-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mist, #F4F8FA); color: var(--ink-light); font-weight: 700; font-size: 13px; }
.xq-mark svg { width: 13px; height: 13px; }
.xq-line.is-ok .xq-mark { background: var(--sage-light); color: var(--sage); }
.xq-item { flex: 1; min-width: 0; }
.xq-src { flex: none; max-width: 45%; text-align: right; font-size: 13px; color: var(--ink-light); }
.xq-line.is-ok .xq-src { color: var(--sage); font-weight: 500; }
.xq-line a { color: inherit; }
/* "Happy to help with" as an icon row (16 Oct 2026): quiet grey, no box, nothing to tap. */
.offers { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.offers-h { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-light); }
.offers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.offers li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-mid); }
.offers svg { color: var(--ink-light); flex: none; }
/* What past employers say: one card (15 Oct 2026). */
.card .also-head, .also-head { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.06em; margin: 18px 0 8px; }
.star-num { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.star-num .stars { color: var(--gold, #D9A030); }
.star-num b { color: var(--ink); font-weight: 600; }
/* Confirmed years: a green tick on the number (15 Oct 2026). */
.yrs-tick { color: var(--sage); display: inline-flex; vertical-align: -1px; margin-right: 3px; }
.yrs-tick svg { width: 14px; height: 14px; }
.hero-reviews { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
#reviews { scroll-margin-top: 80px; }
/* Links within a profile ("All 5 reviews", "Book") glide there instead of jumping (28 Oct 2026). */
@media (prefers-reduced-motion: no-preference) { html:has(#profile) { scroll-behavior: smooth; } }
/* Checkout: what happens next, by the Pay button (15 Oct 2026). */
.co-next { background: var(--sand-dark); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-top: 12px; }
.co-next ol { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 2px; }
.co-hold a { color: var(--ink-light); }
/* Days past the booking window: striped, so they read as "not open yet", not "not free" (15 Oct 2026). */
.mc-day.mc-beyond { background: repeating-linear-gradient(45deg, var(--mist) 0 4px, var(--white) 4px 8px); }
.mc-day.mc-beyond .mc-bars, .mc-day.mc-beyond i { visibility: hidden; }
/* Regular days carry on past the window, faded (16 Oct 2026). */
.mc-day.mc-beyond.mc-carry { opacity: 1; color: var(--accent); background: repeating-linear-gradient(45deg, rgba(29,94,124,.30) 0 4px, rgba(29,94,124,.12) 4px 8px); outline: 1.5px dashed var(--accent); outline-offset: -2px; }
.mc-day.mc-beyond.mc-carry b { font-weight: 700; }
/* Layout C (15 Oct 2026): a wide booking band under the header. Layout B: the side box holds the calendar. */
.book-band { padding-top: 20px; }
.book-unit { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 18px; min-width: 0; }
.book-unit .book-cal-title { margin: 0 0 10px; }
.book-unit .contact, .profile-side .book-unit .contact { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; position: static; max-height: none; overflow: visible; }
.book-unit-box { border-top: 1px solid var(--line); padding-top: 16px !important; }
.book-unit-b { margin-bottom: 16px; padding: 16px; }
.book-unit-b .mc-foot .muted { display: none; }   /* the bars line, to keep the narrow box short */
@media (min-width: 860px) {
  .book-band { padding-top: 32px; }
  .book-unit-c { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; padding: 22px 24px; }
  .book-unit-c .book-unit-box { border-top: 0; padding-top: 0 !important; border-left: 1px solid var(--line); padding-left: 28px !important; }
  .profile-layout-c { padding-top: 20px; }
}

/* Admin: placed work's weekly days (16 Oct 2026). */
.a-pweek { margin: 6px 0 4px; }
.a-pw-grid { display: grid; grid-template-columns: 34px repeat(7, 28px); gap: 3px; align-items: center; }
.a-pw-h { font-size: 11px; color: var(--ink-light); text-align: center; }
.a-pw-cell { width: 28px; height: 22px; border-radius: 5px; border: 1px solid var(--line); background: var(--white); cursor: pointer; padding: 0; }
.a-pw-cell[aria-pressed=true] { background: var(--accent); border-color: var(--accent); }

/* Add to Home screen bar (16 Oct 2026): pinned above the bottom bar on phones. */
.install-bar { position: fixed; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 8px 6px 8px 10px; box-shadow: 0 4px 16px rgba(20, 36, 47, .14); }
.install-bar img { border-radius: 8px; flex: none; }
.install-bar .ib-body { flex: 1; min-width: 0; }
.install-bar .ib-body p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.install-bar .ib-body p.small { font-weight: 400; font-size: 13px; }
.install-bar .btn { flex: none; margin: 0; }
.ib-x { flex: none; border: 0; background: none; font-size: 24px; line-height: 1; padding: 4px 8px; color: var(--ink-light); cursor: pointer; }
body.has-install-bar .wa-help { bottom: calc(148px + env(safe-area-inset-bottom, 0px)); }
body.has-install-bar.in-app main { padding-bottom: 200px; }
@media (min-width: 860px) { .install-bar { display: none; } body.has-install-bar .wa-help { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } body.has-install-bar.in-app main { padding-bottom: 0; } }

/* Keeps a word and its ⓘ together (16 Oct 2026). */
.nowrap { white-space: nowrap; }

/* Available until a date (17 Oct 2026) */
.bk-until { margin: 0 0 10px; color: var(--ink-mid); }
.a-notfree { margin: 4px 0 10px; }
.a-notfree-list { list-style: none; padding: 0; margin: 4px 0 0; font-size: 14px; }
.a-notfree-list li { padding: 3px 0; }
.a-until input { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--white); color: var(--ink); margin-left: 6px; }
#until-box label { display: grid; gap: 4px; }
#until-box input { width: 100%; font: inherit; font-size: 15px; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--white); color: var(--ink); }

/* Save our numbers on the helper sign-up's thank-you page (19 Oct 2026). */
.save-numbers { margin: 18px 0; padding: 16px 18px; display: grid; gap: 10px; text-align: left; background: var(--mist); border: 0; box-shadow: none; }
.save-numbers h2 { font-size: 18px; margin: 0; }
.save-numbers p { margin: 0; }
.sn-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sn-list li { display: grid; gap: 1px; }
.sn-list span { color: var(--ink-mid); font-size: 14px; }

/* Reference form: a gentle nudge for a comment (19 Oct 2026). */
.comment-nudge { background: var(--mist); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; display: grid; gap: 4px; font-size: 15px; }
.comment-nudge p { margin: 0; }
.comment-nudge[hidden] { display: none; }

/* The Household tab (19 Oct 2026): who's at home as round tiles, your home, your kind of helper.
   Two columns on a computer, one on phones. */
.hh-cols { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .hh-cols { grid-template-columns: 1.4fr 1fr; } }
.hh-col { display: grid; gap: 16px; min-width: 0; }
.hh-col .d-card { max-width: none; }
.d-head .hh-edit, .hh-col .d-head .tip { margin-left: auto; }
.hh-edit { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.hh-tiles { display: flex; flex-wrap: wrap; gap: 14px 8px; }
.hh-tile { display: grid; justify-items: center; align-content: start; gap: 2px; width: 76px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-align: center; cursor: pointer; }
.hh-tile b { width: 60px; height: 60px; border-radius: 50%; background: var(--sand-dark); display: grid; place-items: center; font-size: 28px; font-weight: 400; margin-bottom: 4px; transition: box-shadow .15s; }
.hh-tile:hover b, .hh-tile:focus-visible b { box-shadow: 0 0 0 2px var(--accent); }
.hh-tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-tile small { color: var(--ink-light); font-weight: 400; font-size: 12px; line-height: 1.3; }
.hh-add { color: var(--accent); }
.hh-add b { background: var(--white); border: 1.5px dashed var(--accent); color: var(--accent); font-size: 26px; }
.hh-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.hh-facts[hidden], #hh-home-form[hidden] { display: none; }
.hh-fact { display: inline-flex; align-items: center; gap: 5px; background: var(--mist); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.hh-fact .ui-ic { color: var(--accent); }
.hh-saved { margin: 0; color: var(--ink-light); min-height: 0; }
.hh-saved:empty { display: none; }
.hh-kind { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.hh-kind li::before { content: "·"; color: var(--accent); font-weight: 700; margin-right: 8px; }
.hh-private { display: flex; gap: 10px; align-items: flex-start; background: var(--sand-dark); border-radius: 14px; padding: 12px 14px; margin: 0; font-size: 14px; }
.hh-private .ui-ic { color: var(--accent); flex: none; margin-top: 2px; }
.hh-born { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hh-back { margin: 0 0 4px; font-size: 14px; }
.hh-back a { color: var(--accent); text-decoration: none; font-weight: 600; }
.hh-remove { justify-self: center; }
.sheet .d-field { gap: 6px; }
.sheet .d-field input, .sheet .d-field select { width: 100%; }
#hm-consent-err { margin-top: -4px; }
.home-cards .home-setup { position: relative; background: var(--sand-dark); border-color: transparent; gap: 8px; }
.setup-top { display: flex; align-items: center; gap: 14px; padding-right: 30px; margin-bottom: 2px; }
.setup-top h2 { margin: 0 0 2px !important; font-size: 17px !important; }
.setup-top .muted { margin: 0; font-size: 13.5px; }
.setup-art { width: 64px; height: 54px; flex: none; }
.setup-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; background: var(--white); border-radius: 12px; color: var(--ink); text-decoration: none; transition: box-shadow .15s; }
.setup-row > span:nth-child(2) { display: grid; gap: 2px; font-size: 15px; }
.setup-row .muted { font-size: 13.5px; }
.setup-go { color: var(--accent); font-size: 22px; line-height: 1; }
a.setup-row:hover { box-shadow: 0 0 0 1.5px var(--accent); }
.setup-row.is-done { background: transparent; padding: 6px 12px; }
.setup-row.is-done strong { color: var(--ink-light); font-weight: 600; }
.home-who-x { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; background: none; font-size: 22px; color: var(--ink-light); cursor: pointer; }
.sheet .consent[hidden] { display: none; }
.d-field .q-label .opt { margin-left: 4px; }
.sheet:has(#hm-h) { gap: 16px; }   /* the child and pet forms breathe a little more (19 Oct 2026) */
.hh-emo { margin-right: 10px; }

/* Checkout's The job (22 Oct 2026): who it's for as a summary from the Household tab, a pencil opens the
   ticks in place; questions bold at the size of their answers; getting there as one quiet line. */
.co-job .co-q > label, .co-job .co-label { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.co-job .co-q > label .opt, .co-job .co-label .opt { font-weight: 400; color: var(--ink-light); }
.co-job .tip { margin: 0 0 0 6px; }
.co-job .choices-sm .choice { font-size: 15px; padding: 8px 14px; }
.co-sum { border: 1px solid var(--line); border-radius: 12px; }
.co-sum-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.co-sum-row + .co-sum-row { border-top: 1px solid var(--line); }
.co-sum-row .need-ico { width: 34px; height: 34px; }
.co-sum-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.co-sum-tx b { font-weight: 600; }
.co-sum-label { display: inline-flex; align-items: center; font-size: 13px; color: var(--ink-light); }
.co-sum-none { color: var(--ink-light); }
.co-pen { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--accent); display: grid; place-items: center; cursor: pointer; padding: 0; }
.co-pen:hover { border-color: var(--accent); }
.co-sum-edit { flex-direction: column; align-items: stretch; gap: 10px; }
.co-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.co-sum-edit .co-sum-label { font-size: 15px; font-weight: 700; color: var(--ink); }
.co-sum-head .link-btn { font-size: 14px; font-weight: 600; padding: 4px 0; }
.co-who-list { display: grid; gap: 10px; }
.co-q label.co-who-item { font-weight: 400; font-size: 15px; display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.co-q .co-who-item input { width: 20px; height: 20px; padding: 0; margin: 0; flex: none; accent-color: var(--accent); }
.co-add { justify-self: start; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--accent); cursor: pointer; }
.co-getting { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-light); }
.co-getting .ui-ic { flex: none; margin-top: 1px; }
.co-getting b { color: var(--ink); font-weight: 600; }
/* What and when, certain dates (22 Oct 2026): a row per day, its hours on the right; hours typed once fill
   the other days at the same times (shown grey until changed); folded after 4. */
.co-days-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.co-days-head .co-when-sum { justify-content: flex-start; }
.co-dlist { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.co-drow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); gap: 6px 12px; align-items: center; padding: 10px 14px; background: var(--mist); }
.co-drow[hidden] { display: none; }
.co-drow + .co-drow { border-top: 1px solid var(--line); }
.co-drow label { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 15px; font-weight: 400; }
.co-drow label span { font-size: 13px; color: var(--ink-light); }
.co-dinput { display: grid; gap: 3px; min-width: 0; }
.co-dinput-label { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-mid); }
.co-q .co-drow input { width: 100%; }
.co-q .co-drow input.is-auto { color: var(--ink-mid); background: #EEF3F6; }
.co-q .co-drow input.is-empty { border-color: var(--error); }
.co-dmore { display: block; width: 100%; text-align: left; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--white); font-size: 14px; font-weight: 600; }
.co-drow label strong, .co-hours-head { white-space: nowrap; }
.co-hours-head { display: inline-flex; align-items: center; }
@media (max-width: 420px) { .co-drow { grid-template-columns: 104px minmax(0, 1fr); padding: 10px 12px; gap: 6px 10px; } .co-q .co-drow input { padding: 10px; } }
/* Small phones (22 Oct 2026): the hours box goes under the day, so "13:00 to 17:00" isn't cut off. */
@media (max-width: 360px) { .co-drow { grid-template-columns: minmax(0, 1fr); } }
.who-note { color: var(--ink-light); font-size: 13px; }   /* a child's or pet's note under their line on the job card (19 Oct 2026) */

.needs-other { margin-top: 10px; width: 100%; }
.needs-other[hidden] { display: none; }

/* Nanny and sitter (21 Oct 2026): the switch at the top of the booking box, for helpers who do both.
   Two halves like the mockup; the chosen one is white on the grey track. */
.view-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); border-radius: 10px; padding: 3px; margin: 0 0 14px; }
.view-switch button { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: none; color: var(--ink-mid); padding: 7px 6px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.view-switch button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 36, 47, .12); }
.view-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.q-sub { margin: 28px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.06em; }   /* one heading per kind of work in the helper sign-up (21 Oct 2026) */
.q-sub + .q-sub-note { margin: -8px 0 14px; }
.bk-mine-card .bk-mine-kind { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px 42px; font-size: 12px; font-weight: 600; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.06em; }
.bk-mine-card .bk-mine-kind .need-ico { width: auto; height: auto; background: none; color: var(--ink-light); }
.bk-mine-card .bk-mine > .small { margin: 0 0 6px 42px; }
/* Very narrow phones: the icon above the words, so each label stays on one line (29 Oct 2026). */
@media (max-width: 360px) { .view-switch button { font-size: 13px; padding: 6px 4px; gap: 2px; flex-direction: column; white-space: nowrap; } }

/* "What do you need help with?" (option B, 21 Oct 2026): small icon squares, like categories. Three a row on phones. */
.who.help-grid { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px; }   /* all in one row on computers; never one left alone */
/* The same look as the "How?" tiles (21 Oct 2026: sizes, colours and casing matched): a round icon badge, 14px words. */
.help-sq { font: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; padding: 12px 6px 10px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--white); color: var(--ink); cursor: pointer; display: grid; justify-items: center; gap: 7px; min-width: 0; }
.help-sq[aria-pressed=true] { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--sand-dark); color: var(--accent); }
.help-sq[aria-pressed=true] .need-ico { background: var(--white); }
.help-sq:disabled { border-style: dashed; color: var(--ink-light); font-weight: 500; cursor: default; }
.help-sq em { font-style: normal; font-size: 11px; }
@media (max-width: 600px) { .who.help-grid { grid-template-columns: repeat(var(--np, 3), minmax(0, 1fr)); } }
.need { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }   /* two or three "How" tiles in one row (au pairs, 21 Oct 2026) */
.empty .btn { margin-top: 12px; }
@media (max-width: 600px) { .need.need-3 { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 6px; } .need.need-3 .need-btn { flex-direction: row; text-align: left; padding: 8px 12px; } }   /* three "How" choices stack on phones */
.change-search { font-size: 13px; }
.change-search[hidden] { display: none; }
.aupair-tick { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 4px; cursor: pointer; }
.aupair-tick[hidden] { display: none; }
.aupair-tick input { width: 18px; height: 18px; accent-color: var(--accent); }
/* Bigger icons in the squares and the profile switch (21 Oct 2026: the childcare figures read like two small towers). */
.help-sq .need-ico { width: 44px; height: 44px; }
.help-sq .need-ico .ui-ic { width: 26px; height: 26px; }
.view-switch button svg { width: 20px; height: 20px; }
/* One line, not two, where the details follow straight after (29 Oct 2026). */
.co-what + .co-details > .co-row-d:first-child { border-top: 0; padding-top: 0; }
.co-what { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -4px 0 -6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }   /* even, tight spacing around the line (21 Oct 2026; the card's 18px gap does the rest) */
.co-what-item { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
/* The kind of help on booking cards and job cards (21 Oct 2026): the same icons as Find help and checkout. */
.what-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 4px; }
.what-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.what-item .need-ico { width: 28px; height: 28px; }
/* "Book <name>" above the Childcare / House and pets switch (21 Oct 2026): the booking box's own heading moves up. */
.contact.has-switch { display: flex; flex-direction: column; }
.contact.has-switch > .view-box { display: contents; }
.contact.has-switch .bk-title { order: -1; }
/* "Booked with you": its own small white card above the booking box (21 Oct 2026). */
.bk-mine-card { padding: 14px 16px; margin-bottom: 14px; font-size: 14px; background: var(--sage-light); border-color: transparent; }   /* the same soft green as "already works for you" (21 Oct 2026) */
.bk-mine-card .need-ico { background: var(--white); color: var(--fynbos-ink, var(--accent)); }
.bk-mine-card[hidden] { display: none; }
.bk-mine-card .bk-mine { background: none; padding: 0; margin: 0; }
.bk-mine-card .bk-mine-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bk-mine-card .need-ico { width: 32px; height: 32px; }
.bk-mine-card ul { padding-left: 42px; }
.bk-mine-card a { margin-left: 42px; }

/* Move and zoom a photo into the profile circle (22 Oct 2026; js/photo-crop.js). */
.pc { display: grid; gap: 10px; width: 100%; max-width: 340px; }
.pc-hint { margin: 0; font-size: 14px; color: var(--ink-mid); }
.pc-box { position: relative; width: 100%; aspect-ratio: 1; max-width: 100%; border-radius: 14px; overflow: hidden; background: #2b3a44; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.pc-box:active { cursor: grabbing; }
.pc-box:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.pc-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.pc-mask { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle closest-side, transparent 99%, rgba(20, 36, 47, .55) 100%); }
.pc-mask::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); }
.pc-tag { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(20, 36, 47, .75); color: #fff; font-size: 12.5px; padding: 4px 10px; border-radius: 99px; white-space: nowrap; pointer-events: none; }
.pc-zoom { display: flex; align-items: center; gap: 10px; color: var(--ink-mid); }
.pc-zoom input { flex: 1; min-width: 0; accent-color: var(--accent); }
.pc-zoom svg { flex: none; }
.pc-btns { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pc-note { margin: 0; font-size: 13px; color: var(--ink-mid); }
.pc-error { margin: 0; font-size: 14px; color: var(--error); }
.a-photo-wrap { position: relative; display: inline-block; }
.a-crop-btn { position: absolute; right: -6px; bottom: -6px; width: 32px; height: 32px; border-radius: 50%; background: var(--white); border: 1px solid var(--border-strong); display: grid; place-items: center; color: var(--accent); cursor: pointer; padding: 0; }
.a-crop-btn:hover { background: var(--mist); }
.photo-again { text-align: center; margin: -4px 0 12px; font-size: 14px; }
#up-photo .pc { margin: 0 auto 4px; }
#photo-mover .pc { margin: 0 auto 12px; }
/* A choice that can't be picked (22 Oct 2026), e.g. a time the helper is never free. */
.choice:disabled { opacity: .45; cursor: not-allowed; border-style: dashed; }

/* Reviews: one slim row (22 Oct 2026). Kinds of work as tabs on the left, the order as a small menu on the right. */
.review-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.review-bar[hidden], .review-roles[hidden], .review-sort[hidden] { display: none; }
.review-roles { display: flex; gap: 18px; flex-wrap: wrap; min-width: 0; }
/* Tabs read as tappable (28 Oct 2026): the others in deep sea (anything you can tap), the open one in ink with a
   thicker deep-sea line. Shared by the review tabs and "How <name> can help". */
.review-roles button { font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--accent); padding: 4px 0 8px; margin-bottom: -1px; cursor: pointer; }
.review-roles button:hover { border-bottom-color: var(--line); }
.review-roles button[aria-pressed="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
.review-roles button:focus-visible, .review-sort select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.review-sort { margin-left: auto; padding-bottom: 6px; }
/* With one kind of work the order menu sits beside the Reviews title (28 Oct 2026). */
.review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.review-head .review-sort { padding-bottom: 0; }
.review-sort select { font: inherit; font-size: 13px; color: var(--accent); border: 0; padding: 2px 16px 2px 2px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231D5E7C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 2px center; }
.review-sort .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* One card per kind of help on the profile (22 Oct 2026): small-caps groups split by thin lines, and every line
   alike (a small circle, the words, the source on the right). Offers carry their icon in the circle. */
.xq-list.xq-two { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 13px 18px; }
.xq-line.is-offer .xq-mark { color: var(--soft-ink); background: var(--sand-dark); }
.kind-tabs { border-bottom: 1px solid var(--line); margin: -4px 0 14px; }
.kind-tabs button { font-size: 15px; }

/* At a glance (22 Oct 2026): the basics as tidy rows under the calendar - icon, label, answer, thin lines between. */
.profile-main > .block.glance { display: block; padding-top: 6px; padding-bottom: 6px; }
.glance-item { display: grid; grid-template-columns: 20px 140px 1fr; gap: 10px; align-items: baseline; padding: 11px 0; font-size: 15px; line-height: 1.4; }
.glance-item + .glance-item { border-top: 1px solid var(--line); }
.glance-ic { color: var(--accent); align-self: start; margin-top: 2px; }
.glance-label { font-size: 12px; font-weight: 600; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.06em; }
.glance-value { min-width: 0; }
@media (max-width: 480px) { .glance-item { grid-template-columns: 20px 1fr; row-gap: 2px; } .glance-value { grid-column: 2; } }
.kind-block[hidden] { display: none; }

/* Admin lists, slimmer (23 Oct 2026): helper rows without a strip of their own, and
   references in To do folded into one line until tapped. */
.a-panel .a-item { padding: 9px 14px; margin-bottom: 8px; }
.a-panel .a-item-top .a-avatar { width: 36px; height: 36px; font-size: 13px; }
.a-item .a-meta .a-confirmed { font-size: inherit; }
.a-ref-fold > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 14px; }
.a-ref-fold > summary::-webkit-details-marker { display: none; }
/* A big round toggle on the left, and the opened card indented under it (28 Oct 2026) */
.a-ref-fold > summary { position: relative; display: grid; gap: 2px; padding-left: 38px; min-height: 28px; margin: 0; color: var(--ink); font-weight: 400; }
.a-ref-sum-l1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.a-ref-sum-l1 .a-pill { flex: none; }
.a-ref-sum-sub { color: var(--ink-mid); font-weight: 400; }
.a-ref-sum-what { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
.a-ref-fold > summary::before { content: ''; position: absolute; left: 0; top: -3px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5E7C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .15s; }
.a-ref-fold[open] > summary::before { transform: rotate(90deg); }
.a-ref-fold > summary:hover::before { background-color: var(--line); }
/* Open or closed, the line itself never moves (28 Oct 2026: it jumped); the space sits above the card */
.a-ref-fold[open] > summary { margin: 0; padding-bottom: 0; border: 0; }
.a-ref-fold > .a-ref-body { margin: 12px 0 2px 13px; padding-left: 23px; border-left: 2px solid var(--line); gap: 12px; }
.a-flags { display: grid; gap: 6px; }
.a-ref-fold > .a-ref-body.is-problem { border-left-color: var(--error); }
.a-problem .a-ref-fold > .a-ref-body.is-problem { border-left-color: var(--line); }   /* To do's card already has a red edge */
@media (max-width: 480px) { .a-ref-fold > .a-ref-body { padding-left: 14px; } }
.a-ref.a-refcard { display: block; padding: 14px 0; }
.a-flag.is-quiet { background: none; color: var(--ink-mid); padding: 0; }
.a-ref-sum-flags.is-quiet { color: var(--ink-light); }
.a-flag-clear { font-size: 12.5px; color: var(--ink-light); margin: 0; }
.a-ref-sum-what { color: var(--ink-light); font-size: 13px; }
.a-ref-sum-verdict { white-space: nowrap; }
.a-ref-sum-verdict .stars { color: var(--sun); }
.a-ref-sum-flags { color: var(--error); font-size: 13px; }

/* My rates on the helper's Profile tab (26 Oct 2026): one line per kind of work, the pencil opens it. */
.mr-list { display: flex; flex-direction: column; }
.mr-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.mr-row:first-child { border-top: 0; padding-top: 4px; }
.mr-row .need-ico { width: 32px; height: 32px; }
.mr-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mr-sum small { color: var(--ink-light); font-size: 14px; }
.mr-pen { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--accent); display: grid; place-items: center; cursor: pointer; }
.mr-pen[aria-expanded=true] { background: var(--sand-dark); }
.mr-open { background: var(--mist); border-radius: 10px; padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.mr-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.mr-field .rand-row input { max-width: 110px; }
.mr-saved { margin: 0; color: var(--fynbos-ink); }

/* Kind-of-help tabs on profiles carry their icon (26 Oct 2026). */
.kind-tabs button { display: inline-flex; align-items: center; gap: 6px; }

/* The note's question is quieter (26 Oct 2026): checkout has a lot competing for attention. */
.co-job .co-note-q > label { font-weight: 500; color: var(--ink-mid); }

/* The calendar's hint sits clear of the grid (26 Oct 2026). */
.week-hint { margin-top: 10px; }

/* Home calendar, checked recently (26 Oct 2026): the tick and a pencil on one row. */
.free-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.free-head .cal-ok, .free-head .free-say { margin: 0; }
.free-card .free-lines + #home-month, .free-card .small.muted + #home-month { margin-top: 12px; }

/* Home: the calendar's Edit, and the live card's link buttons (26 Oct 2026). */
.free-edit { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.status-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.status-btns .btn { margin: 0; }

/* My certificates on the helper's Profile tab (26 Oct 2026). */
.cert-list { list-style: none; margin: 0 0 10px; padding: 0; }
.cert-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.cert-list li:first-child { border-top: 0; padding-top: 2px; }
.cert-state { flex: none; font-size: 12.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--grey-soft, #EEF1F3); color: var(--ink-mid); }
.cert-state.is-ok { background: var(--fynbos-soft, #E4EEE2); color: var(--fynbos-ink); }
/* Not accepted (26 Oct 2026): the row stacks so our note sits under the name. */
.cert-list li.is-rejected { display: block; }
.cert-row { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cert-list li.is-rejected .cert-row > span:first-child { color: var(--ink-light); }
.cert-state.is-no { background: var(--mist); color: var(--ink-mid); }
.cert-note { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-mid); }
.cert-add { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.cert-form { background: var(--mist); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.cert-form .q { margin: 0; }
.cert-form select { width: 100%; }

/* Quick reasons for Not accepted and Send back (26 Oct 2026): tap a reason, edit, send. */
.a-reason { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.a-reason-picks { margin-top: 8px; }
.a-reason-pick { cursor: pointer; font: inherit; font-size: 13px; }
.a-reason-pick.is-on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.a-reason-text { width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; }
.a-reason .link-btn { margin-top: 8px; }
/* Meets the bar while still collecting (26 Oct 2026): good news, so fynbos. */
.a-bar-met { font-size: 11px; font-weight: 600; color: var(--fynbos-ink); background: var(--sage-light); border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
.a-stuck { font-size: 11px; font-weight: 600; color: var(--ink); background: #FDF0E3; border-radius: 10px; padding: 1px 7px; white-space: nowrap; }   /* soft orange: worth a nudge, not an error (26 Oct 2026) */
.a-ref-chips { margin-top: 8px; }
/* The count in its own bubble, so it doesn't read as part of the label (27 Oct 2026). */
.a-ref-chips button .a-chip-n { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--mist); color: var(--ink); opacity: 1; font-size: 12px; text-align: center; }
.a-ref-chips button[aria-pressed="true"] .a-chip-n { background: rgba(255,255,255,0.25); color: #fff; }
/* A sent WhatsApp opens to its full text (27 Oct 2026). */
.a-wa-msg summary { cursor: pointer; list-style: none; }
.a-wa-msg summary::-webkit-details-marker { display: none; }
.a-wa-msg .a-wa-kind { color: var(--accent); text-decoration: underline; }
.a-wa-text { white-space: pre-wrap; margin: 6px 0 4px; padding: 8px 10px; background: var(--mist); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }

/* Reference and photo nudges in the helper's WhatsApp tab (27 Oct 2026) */
.a-nudge { display: grid; gap: 8px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.a-nudge-when { font-weight: 500; color: var(--ink-mid); margin-left: 6px; }
.a-nudge-when.is-due { color: var(--ink); background: #FDF0E3; border-radius: 10px; padding: 1px 7px; }
.a-nudge-text { white-space: pre-line; background: var(--mist); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.a-nudge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.a-nudge-btn .ui-ic { width: 15px; height: 15px; }
.a-nudge-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.a-nudge-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.a-nudge-list li > span:first-child { flex: 1 1 160px; min-width: 0; }
.a-nudge-photo .a-reason-picks { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.a-nudge-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--accent); text-decoration: none; }
.a-nudge-btn:hover { border-color: var(--accent); }
.a-nudge-due { cursor: help; }
.a-nudge-name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.a-nudge-peek { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.a-nudge-chev { display: inline-block; font-size: 17px; line-height: 1; color: var(--ink-mid); transition: transform .15s; }
.a-nudge-peek.is-open .a-nudge-chev { transform: rotate(90deg); }
.a-nudge-list .a-nudge-text { flex-basis: 100%; }

/* Reference form (27 Oct 2026): a slim bar that fills as the referee scrolls through the questions, with the time left. */
.ref-progress { position: sticky; top: 0; z-index: 5; background: var(--page-tint, #F7FAFB); padding: 8px 0 8px; margin: -4px 0 8px; }
.ref-progress-text { font-size: 12px; color: var(--ink-light); text-align: right; margin: 0 0 4px; }
.ref-progress-track { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ref-progress-fill { display: block; height: 100%; width: 0; background: var(--sage); border-radius: 2px; transition: width .2s ease-out; }

/* Admin Activity (28 Oct 2026): seen today, worth a look (soft orange, not an error), one card per person per day. */
.act { display: grid; gap: 12px; }
.act-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; min-width: 0; }
.act-card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.act-card-h h3 { margin: 0; font-size: 15px; }
.act-seen summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.act-seen summary::-webkit-details-marker { display: none; }
.act-seen .a-meta { margin: 0; }
.act-faces { display: flex; flex: none; }
.act-face { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--sand-dark); color: var(--soft-ink); border: 2px solid var(--white); margin-left: -6px; flex: none; }
.act-faces .act-face:first-child { margin-left: 0; }
.act-face.is-helper { box-shadow: 0 0 0 1.5px var(--sun); }   /* sun ring: helpers' photos always have one */
.act-face-lg { width: 34px; height: 34px; margin: 0; font-size: 12px; }
.act-seen-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.act-look { background: #FDF0E3; border-color: #F3D9BE; }
.act-look-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.act-look-row + .act-look-row { border-top: 1px solid #F3D9BE; padding-top: 10px; }
.act-look-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: #C9752A; }
.act-look-what { font: inherit; font-size: 14px; text-align: left; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; display: grid; gap: 1px; min-width: 0; }
.act-look-what .a-meta { margin: 0; }
.act-tick { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); background: var(--white); display: grid; place-items: center; cursor: pointer; padding: 0; }
.act-tick:hover { background: var(--sand-dark); }
.act-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.act-chips button { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--white); color: var(--ink); cursor: pointer; }
.act-chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.act-day { margin: 4px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mid); }
.act-people { gap: 0; padding-block: 4px; }
.act-who { padding: 10px 0; display: grid; gap: 6px; }
.act-who + .act-who { border-top: 1px solid var(--mist); }
.act-who-h { font: inherit; display: flex; gap: 10px; align-items: center; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--ink); min-width: 0; }
.act-who-h .a-avatar { width: 34px; height: 34px; font-size: 12px; flex: none; }
.act-who-h > span:last-child { display: grid; min-width: 0; }
.act-who-h b { font-size: 14.5px; }
.act-who-h .a-meta { margin: 0; }
.act-lines { list-style: none; margin: 0 0 0 44px; padding: 0; display: grid; gap: 5px; }
.act-lines li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 13.5px; }
.act-lines li .ui-ic { color: var(--ink-light); transform: translateY(2px); }
.act-lines li.is-look .ui-ic { color: #C9752A; }
.act-lines-panel { margin: 4px 0 0; }
.act-t { color: var(--ink-light); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.act-sub { display: block; color: var(--ink-mid); font-size: 12.5px; }
.act-old { color: var(--ink-light); text-decoration: line-through; }
.act-more { text-align: center; margin: 0; }
@media (max-width: 420px) { .act-lines { margin-left: 0; } }

/* Reports in plain English (28 Oct 2026): worth knowing, ready to book, a verdict per drop-off flow. */
.a-know { gap: 8px; }
.a-know-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; margin: 0; font-size: 14px; align-items: start; }
.a-know-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.a-know-dot .ui-ic { stroke-width: 2.6; }
.a-know-dot.is-good { background: var(--sage-light); color: var(--sage); }
.a-know-dot.is-look { background: #FDF0E3; color: #C9752A; }
.a-ready { width: 100%; border-collapse: collapse; font-size: 14px; }
.a-ready th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-mid); padding: 0 0 4px; }
.a-ready td { padding: 6px 0; border-top: 1px solid var(--mist); }
.a-ready .num { text-align: right; font-variant-numeric: tabular-nums; padding-left: 10px; }
.a-ready .is-zero { color: #C9752A; font-weight: 700; }
.a-flow-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.a-flow-h h3 { margin: 0 !important; }
.a-verdict { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.a-verdict.is-good { background: var(--sage-light); color: var(--fynbos-ink); }
.a-verdict.is-look { background: #FDF0E3; color: #9A5518; }
.a-verdict.is-ok { background: var(--sand-dark); color: var(--soft-ink); }
.a-verdict.is-few { background: var(--grey-light); color: var(--grey); }
.a-flow-big { margin: 0; font-size: 14px; }
.a-flow-big b { font-size: 19px; font-variant-numeric: tabular-nums; }
.a-funnel > .a-meta { margin: 2px 0 8px; }
.a-gap { font-size: 12px; color: var(--ink-light); padding-left: 10px; }
.a-gap.is-worst { color: #9A5518; font-weight: 700; }
.a-months td { padding: 4px 0; }
/* Activity round (28 Oct 2026): seen today as counts that open to names, and each day folds. */
.act-seen summary { gap: 8px; flex-wrap: wrap; }
.act-seen-ic { color: var(--accent); display: inline-flex; }
.act-seen summary > .act-seen-n { display: inline-flex; align-items: baseline; margin-left: auto; font-size: 13.5px; color: var(--ink-mid); }
.act-seen-n::after { content: "▾"; margin-left: 6px; color: var(--accent); }
.act-seen details[open] .act-seen-n::after { content: "▴"; }
.act-seen-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
.act-seen-group .a-sub-small { margin: 0 0 4px; }
.act-seen-list { margin: 0; gap: 2px; max-height: 220px; overflow-y: auto; }
.act-seen-list li { display: flex; justify-content: space-between; gap: 8px; }
.act-dayfold { display: grid; gap: 8px; }
.act-dayfold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 4px 0; }
.act-dayfold > summary::-webkit-details-marker { display: none; }
.act-dayfold > summary::before { content: "▸"; color: var(--accent); font-size: 15px; width: 12px; }
.act-dayfold[open] > summary::before { content: "▾"; }
.act-dayfold > summary .act-day { margin: 0; }
.act-dayfold > summary .a-meta { margin: 0; }

/* Household sign-up, direction B (28 Oct 2026): first name, email, password; how it works beside it on computers. */
.ff-short .name-row { grid-template-columns: minmax(0, 1fr); }
.peek-how { display: none; }
@media (min-width: 900px) {
  .peek-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; justify-self: stretch; counter-reset: how; }
  .peek-how li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; font-size: 14px; }
  .peek-how li::before { counter-increment: how; content: counter(how); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--white); color: var(--accent); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
  .peek-how strong { font-size: 14.5px; }
  .peek-how span { color: var(--ink-mid); }
}
/* Same person? (28 Oct 2026): soft orange, worth a look, not an error. */
.a-bdg-look { background: #FDF0E3; color: #9A5518; }
.a-same { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; font-size: 14px; }
.a-same .ui-ic { color: #C9752A; flex: none; margin-top: 2px; }
/* "What you're looking for" in the set-up card (28 Oct 2026): a row that opens in place. */
button.setup-row { font: inherit; width: 100%; border: 0; text-align: left; cursor: pointer; }
button.setup-row:hover { box-shadow: 0 0 0 1.5px var(--accent); }
button.setup-row[aria-expanded="true"] { border-radius: 12px 12px 0 0; }
.setup-ask { background: var(--white); border-radius: 0 0 12px 12px; margin-top: -8px; padding: 4px 14px 14px; display: grid; gap: 4px; }
.setup-ask .q { margin: 0 0 10px; }
.setup-ask .hh-saved { margin: 0; }

/* Home: "Checked 2 days ago" as a small soft chip, not a loose line (29 Oct 2026). */
.cal-ok.cal-chip { display: inline-flex; width: auto; gap: 5px; background: var(--fynbos-soft, #E4EEE2); color: var(--fynbos-ink); font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.cal-ok.cal-chip svg { width: 13px; height: 13px; }

/* Looking quietly: two equal choices side by side (29 Oct 2026). */
.quiet-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.quiet-btns .btn { flex: 1 1 140px; margin: 0; }