/* SEARCH, RESULTS AND THE CARER PROFILE.

   THE PALETTE AND THE SHELL ARE NOT IN HERE ANY MORE. They moved to
   shared/hibant-shell.css on 30 Aug 2026 so that 105 pages could adopt the header
   without also adopting .btn, .pill, .av, .back and .cb, every one of which
   already means something different in shared/hibant.css.

   ANY PAGE LOADING THIS MUST LOAD hibant-shell.css FIRST, or every var() in here
   resolves to nothing. */



/* ── BASE, SCOPED TO .hds ─────────────────────────────────────────────────
 *
 * THE TOKENS ABOVE SIT ON :root AND THE RESETS BELOW DO NOT, and the split is
 * deliberate. Verified before it was made: this file and hibant.css share ZERO
 * variable names, so the tokens can sit at the root harmlessly. The RESETS
 * cannot: `* { margin: 0 }
`, a body rule and bare h1 to h4 would repaint all
 * 16,000 lines of the old portal the moment this file loaded, which is the one
 * move the strangler approach exists to avoid.
 *
 * So everything that would touch somebody else's markup is scoped to a .hds
 * container. A rebuilt screen mounts inside one and gets the whole system; the
 * old screens beside it are untouched. When the last old screen goes, the
 * wrapper can go with it and these can return to being bare selectors.
 *
 * The .ds-* component classes below are NOT scoped, because a class nothing
 * else uses cannot collide with anything.
 */

.hds, .hds *, .hds *::before, .hds *::after { box-sizing: border-box; }

.hds * { margin: 0; padding: 0; }


.hds {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0.005em; /* never track body negative */
  color: var(--t1);
  background: var(--page);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}


/* No fixed heights on text containers and no overflow:hidden on text. This is
   what makes 1.4.4 Resize Text to 200% and 1.4.12 Text Spacing survivable. */
/* ── HOW WIDE A PORTAL SCREEN IS ─────────────────────────────────────────────
 *
 * ONE NUMBER, 31 Aug 2026. Nine module stylesheets each carried their own
 * `max-width: 40rem`, identical and unrelated, so the width of the product was
 * a thing you changed nine times and could get wrong eight ways.
 *
 * 40rem was 640px, CENTRED. Beside a 225px sidebar on a 1680px screen that left
 * roughly 370px of empty page down each side, and it is why two cards stacked
 * where there was room for both. The founder, walking it: "you've kind of only
 * focused on the center of the page where this should cover most of the page
 * except for the sidebar."
 *
 * WIDENING IS SAFE FOR READING because prose caps itself: the rule above holds
 * every paragraph and list item to 66 characters whatever the container does. So
 * the container widening lets CARDS spread while a sentence stays the same
 * length it always was. That is the whole reason this can be one number.
 *
 * --portal-reading is for the surfaces that ARE a single column of one thing: a
 * conversation, where a stretched bubble is worse, not better.
 */
:root {
  --portal-measure: 76rem;

  --portal-reading: 44rem;
}

/* HOW LONG A LINE OF READING IS. --measure is defined in hibant-shell.css, NOT
   here, and that is not tidiness: 107 of the 115 pages load the shell and do NOT
   load this file. Declared here, the token would be undefined on all of them and
   `max-width: var(--measure)` would resolve to nothing at all, silently, while
   this rule looked perfectly correct. See the long note at the definition. */
.hds p, .hds li, .hds dd, .hds dt, .hds label, .hds figcaption { max-width: var(--measure); }

/* PARAGRAPH SPACING, HALVED 1 Sep 2026. This was calc(var(--fs-body) * 2),
   which is 38px between every pair of paragraphs on every screen, and the
   founder read it as "a big paragraph space in which I don't think needs to be
   there". He is right: 38px is more than a full line of leading, so two
   paragraphs in one card read as two separate things rather than one thought
   continued. Typographic convention puts paragraph spacing at roughly three
   quarters of a line; the line here is 28.5px, and --sp-5 is 24. It is a token
   now rather than a multiple nobody had looked at.

   THIS MOVES EVERY SCREEN, which is the point: the rhythm was wrong everywhere,
   not on one card. */
.hds p + p { margin-top: var(--sp-5); }


.hds h1, .hds h2, .hds h3, .hds h4 { font-family: var(--font-display); line-height: var(--lh-head); font-weight: 700; color: var(--t1); }

.hds h1 { font-size: var(--fs-h1); }

.hds h2 { font-size: var(--fs-h2); }

.hds h3 { font-size: var(--fs-h3); }

.hds h4 { font-size: var(--fs-lead); }


/* THE FLOOR, ENFORCED. Small print is still print somebody has to read. */
/* ONE SECONDARY TREATMENT. This was weight 500 on --t2 while `.fc-row__sub` and
   `.fc-hero__when` were weight 400 on --t3 for exactly the same job, so a
   timestamp under one box did not match a timestamp under the next. */
.hds small, .ds-meta, .ds-help, .hds figcaption { font-size: var(--fs-min); font-weight: 400; color: var(--t3); }


/* :not(.ds-btn) IS LOAD BEARING, added 23 Aug 2026.
 *
 * Without it this rule beat .ds-btn--primary on specificity (0,1,1 against
 * 0,1,0) and painted a button's LABEL the same --brand teal as the button's own
 * BACKGROUND. A link styled as a button rendered completely blank. Every
 * <button> was fine, so it only ever showed on the three anchors-as-buttons,
 * which is why mounting a module in isolation never reproduced it. Anna's
 * "Find a carer" button on the day-one empty state was invisible on the live
 * site for a day. */
/* A LINK THAT IS DRESSED AS A BUTTON IS NOT A LINK, for colour purposes.
 *
 * FOUND ON THE LIVE SITE 9 SEP 2026. The founder filtered the carer search down
 * to nobody and got a solid teal box with no writing on it. The button was
 * there and its label was there: this rule was painting the text brand teal on
 * a brand teal background.
 *
 * IT WINS ON SPECIFICITY, which is the part worth understanding. `:not()` takes
 * the weight of what is inside it, so `.hds a:not(.ds-btn)` scores one class
 * higher than `.hds .btn` below and overrides its colour while leaving its
 * background alone. Two rules, both correct in isolation, and the result is
 * invisible text.
 *
 * So both button classes are excluded here rather than the .btn rule being
 * given more weight: an arms race on specificity is how the next one of these
 * happens. */
.hds a:not(.ds-btn):not(.btn) { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 2px; }

.hds a:not(.ds-btn):not(.btn):hover { color: var(--brand-hover); }


/* ── FOCUS. A GOV.UK yellow ring is 1.01:1 on this ground, effectively
 * invisible, so the compliance is carried by the dark bar underneath and the
 * yellow only does the noticing. ─────────────────────────────────────────── */

.hds :focus-visible {
  outline: 3px solid #FFDD00;
  outline-offset: 0;
  box-shadow: 0 0 0 3px #FFDD00, 0 4px 0 0 #0B0C0C; /* 14.70:1 on page */
  border-radius: var(--r-sm);
}
@media (forced-colors: active){

  .hds :focus-visible { outline: 3px solid Highlight; box-shadow: none; }
}


/* ── TOUCH TARGETS ────────────────────────────────────────────────────────── */

/* THE SAME TRAP, SECOND INSTANCE. This is the FLOOR for anything clickable
 * that is not a designed button. It used to name a.ds-btn and bare .hds button,
 * so at 0,2,0 it beat .ds-btn's own min-height of --tap-primary at 0,1,0, and
 * every designed button in the portal came out at 48px when the system says 56.
 * A .ds-btn sets its own height; this rule is for everything else. */
.hds button:not(.ds-btn), .hds [role="button"]:not(.ds-btn), .hds input[type="submit"] { min-height: var(--tap-min); }

.ds-iconbtn {
  min-width: var(--tap-min); min-height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; border-radius: var(--r-sm);
}

.ds-iconbtn svg { width: var(--glyph); height: var(--glyph); }

.ds-actions { display: flex; flex-wrap: wrap; gap: var(--tap-gap); }


/* ── BUTTONS ──────────────────────────────────────────────────────────────── */

.ds-btn {
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700;
  line-height: 1.2; border-radius: var(--r-pill); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); min-height: var(--tap-primary);
  border: 2px solid transparent; text-decoration: none; transition: background .15s, color .15s;
}

.ds-btn--primary { background: var(--brand); color: var(--on-brand); }

.ds-btn--primary:hover { background: var(--brand-hover); color: var(--on-brand); }

/* Secondary carries a real 2px --bd-strong boundary, never --bd. */
.ds-btn--secondary { background: var(--card); color: var(--t1); border-color: var(--control-bd); }

.ds-btn--secondary:hover { background: var(--surface); }

.ds-btn--quiet { background: transparent; color: var(--brand); min-height: var(--tap-min); padding: var(--sp-2) var(--sp-3); }

.ds-btn--danger { background: var(--card); color: var(--alert); border-color: var(--alert); }

.ds-btn[disabled] { opacity: .55; cursor: not-allowed; }

.ds-btn--full { width: 100%; }


/* ── CARD. Bounded structurally, because card on page is 1.20:1. ─────────── */

/* ══════════════════════════════════════════════════════════════════════════
   THE ANATOMY OF A BOX. Written down 31 Aug 2026 because it never had been, and
   the founder had to say so twice.
   His words: "maybe it'll be easier to have a rule for the different sections of
   a box and really think, okay, what's the heading of the box? What's the body?
   What's the font I'm using for the body? If it has a button, I use the same
   button designs we always use. On top of the main heading there might be a
   status wording. What's the colour, the font, the size and boldness I'm using
   there? And then you can apply this rule to all the different boxes."

   WHAT WAS ACTUALLY THERE, measured across the family screens: SIX title
   treatments and EIGHT body treatments, for what is really four roles. Body text
   alone ran at three sizes, three weights and three colours, so two cards
   standing side by side said the same kind of thing in two different voices.

   FOUR PARTS, IN THIS ORDER, AND NOTHING ELSE:

     status    16px, weight 700, uppercase, --t3      optional, above the heading
     heading   the display face, 24px, weight 700, --t1
     body      the body face, 19px, weight 400, --t2
     button    .ds-btn, unchanged, the same one everywhere

   THE BODY IS STYLED BY POSITION, not by a class anybody has to remember. A <p>
   inside a card IS the body of the card, so no existing markup has to be
   rewritten and no future card can get it wrong by forgetting a class.
   `.ds-meta` still opts out, for a genuinely secondary line such as a timestamp
   under the body.
   ══════════════════════════════════════════════════════════════════════════ */

.ds-card {
  background: var(--card);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

/* THE STATUS. One word or three, above the heading, saying what state this is.
   The kicker on the hero was already exactly this, so this is that rule given a
   name every box can use. */
.ds-card__status {
  display: block;
  font-size: var(--fs-min); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--sp-2);
}

/* THE BODY, AND THE SELECTOR IS DELIBERATELY WEAK. `:where()` contributes NO
   specificity, so this whole rule weighs (0,1,0): exactly enough to beat the
   inherited page defaults, and light enough that any component wanting something
   else can still say so with a single class.
   THE FIRST VERSION WAS (0,2,1) AND FLATTENED A DELIBERATE EMPHASIS. It beat
   `.fc-night__sum { font-weight: 700 }`, whose own comment explains why it is
   bold: "at seven in the morning she wants to know how the night went before she
   wants the detail." A default that cannot be overridden is not a default, it is
   a rule nobody can escape. */
.ds-card > :where(p:not(.ds-meta)),
:where(.ds-card__body) {
  font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body);
  color: var(--t2);
}
.ds-card > :where(p:not(.ds-meta) + p:not(.ds-meta)) { margin-top: var(--sp-3); }

/* WEIGHT 700, LIKE EVERY OTHER HEADING. `.hds h1, h2, h3, h4` sets it, and this
   was written for a <div>, which gets none of that: a card title rendered at 400
   beside a page heading at 700 and a bold paragraph pretending to be a title at
   700. Three weights for one level. The founder, on the two cards side by side:
   "there is no sort of uniformity here." */
/* .hds PREFIX ADDED 31 Aug 2026, AND IT IS LOAD BEARING.
   `.hds h2` weighs (0,1,1) and this weighed (0,1,0), so an <h2 class="ds-card__title">
   silently rendered at 30px while every <h3> beside it rendered at 24. The class
   states an intent and the element rule was quietly overruling it. Same shape as
   `.pgsec p` beating `main p`, which is already in the template's trap list.
   NOTHING REGRESSES: `.hds h3` is --fs-h3 too, so the fourteen cards already
   using <h3> compute identically, and only the three using <h2> move, to the
   size the component always said they were. */
.hds .ds-card__title, .ds-card__title {
  font-family: var(--font-display); font-size: var(--fs-h3);
  line-height: var(--lh-head); font-weight: 700; color: var(--t1);
  margin: 0 0 var(--sp-2);
}

.ds-card + .ds-card { margin-top: var(--sp-4); }


/* ── CHIPS. Rule 2 and rule 3 together: a border always, and a shape slot so
 * the colour is never the only carrier of meaning. ──────────────────────── */

.ds-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-min); font-weight: 700; line-height: 1.3;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--control-bd); /* never a bare fill */
  background: var(--surface); color: var(--t1);
}

.ds-chip__mark { width: 1rem; height: 1rem; flex: none; }
 /* the shape, not the hue */
.ds-chip--ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }

.ds-chip--info { background: var(--info-bg); color: var(--info); border-color: var(--info); }

.ds-chip--warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }

.ds-chip--alert { background: var(--alert-bg); color: var(--alert); border-color: var(--alert); }


/* ── FIELDS ───────────────────────────────────────────────────────────────── */

.ds-label { display: block; font-size: var(--fs-body); font-weight: 700; margin-bottom: var(--sp-2); color: var(--t1); }

.ds-hint { display: block; font-size: var(--fs-min); font-weight: 500; color: var(--t2); margin-bottom: var(--sp-2); }

.ds-input, .ds-select, .ds-textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--t1); background: var(--card);
  border: 2px solid var(--control-bd); /* rule 1: a control boundary is never --bd */
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); min-height: var(--tap-min);
}

.ds-textarea { min-height: calc(var(--tap-min) * 2.5); resize: vertical; }

.ds-input:focus, .ds-select:focus, .ds-textarea:focus { border-color: var(--brand); }

.ds-field + .ds-field { margin-top: var(--sp-5); }

.ds-error { display: flex; gap: var(--sp-2); font-size: var(--fs-min); font-weight: 700; color: var(--alert); margin-top: var(--sp-2); }


/* ── HERO BLOCK. t3 on --hero is 3.43:1, so it is banned here in code and not
 * only in guidance: anything inside a hero inherits t1. ─────────────────── */

.ds-hero {
  background: var(--hero); border: 1px solid var(--hero-edge);
  border-radius: var(--r-lg); padding: var(--sp-5); color: var(--t1);
}

/* EXCEPT A BUTTON, WHICH BRINGS ITS OWN INK. Fixed 3 Sep 2026, and it is the
 * SAME defect the comment two hundred lines above records: a blanket colour
 * rule beating .ds-btn--primary, which sets color: var(--on-brand) at line 176
 * and therefore loses to anything of equal specificity written after it.
 *
 * The button rendered --t1, near black, on its own --brand dark green
 * background. Measured in a browser rather than reasoned about, because this
 * is invisible in the source of either file: each rule is correct on its own
 * and only the order decides.
 *
 * .ds-hero was used by nothing else in the product when this was changed, so
 * this is the fix at source rather than an override somewhere downstream. */
.ds-hero *:not(.ds-btn) { color: var(--t1); }


/* ── EMPTY STATE. Its own component because the demo has none anywhere, and a
 * real person arriving from the live front door meets one on day one. ───── */

/* ── AN EMPTY STATE IS A CARD, AND HAS NO CLASS OF ITS OWN ─────────────────
   Deleted 1 Sep 2026. `.ds-empty` set padding and left aligned text and nothing
   else: no background, no border. So the empty version of a thing stood on the
   bare page while the filled version of the same thing sat in a box.

   The founder, reading his own product: "they're just standing right there in
   the open ... do you think it'd be good to have these boxes in the empty
   states? It can prompt people, and help them know what to expect and what this
   page is meant for."

   THIRTY TWO CLASS REFERENCES ACROSS FIVE FILES were converted to .ds-card, and
   THE CLASS IS GONE RATHER THAN REDEFINED AS A CARD, because a second name for
   a card is how two names for one thing come back. Guarded: no file may
   reintroduce it.

   IT SURVIVED A FIX. Seven of these were converted on her work screen on 1 Sep
   and the guard written that day read ONE FILE, portal-family-care.js, while the
   defect was in six. That is why this one is repo wide. */


/* ── TAB BAR ──────────────────────────────────────────────────────────────── */

.ds-tabs {
  display: flex; background: var(--card);
  border-top: 1px solid var(--control-bd);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ds-tab {
  flex: 1; min-height: var(--tap-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: none; cursor: pointer;
  font-size: var(--fs-min); font-weight: 700; color: var(--t2); font-family: var(--font-body);
}

.ds-tab svg { width: var(--glyph); height: var(--glyph); }

/* Current tab is marked by weight and a bar as well as colour: rule 3. */
.ds-tab[aria-current="page"] { color: var(--brand); box-shadow: inset 0 3px 0 0 var(--brand); }


/* ── SHEET ────────────────────────────────────────────────────────────────── */

.ds-sheet {
  background: var(--card); border: 1px solid var(--control-bd);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--sp-5); padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0));
}

.ds-sheet__grab { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--bd-strong); margin: 0 auto var(--sp-4); }

.ds-sheet__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-head); margin-bottom: var(--sp-3); }


/* ── TOAST ────────────────────────────────────────────────────────────────── */

.ds-toast {
  background: var(--t1); color: var(--card);
  font-size: var(--fs-body); font-weight: 500;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  max-width: 34rem;
}


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



/* ══════════════════════════════════════════════════════════════════════════
   SEARCH, RESULTS AND THE CARER PROFILE. Moved out of index.html 30 Aug 2026.

   WHY THESE AND NOT THE WHOLE PAGE. The landing page and the browse page are
   largely the same page: a search, a filter rail, a grid of carer cards and a
   profile. That is the whole reason the founder ruled the front page should
   ROUTE into the browse page rather than duplicate it. So the shared vocabulary
   moves here and the landing page keeps only its own furniture: the hero copy,
   the three steps, the proof row and the post login seam.

   84 blocks moved. 54 rules stayed behind.

   THREE THINGS WERE CHANGED ON THE WAY IN, all deliberate:

   1. THE TOKEN NAMES. Written against --s1..--s9 and --r1..--r3, remapped onto
      this file's --sp-* and --r-* scale. Two names for 4px is how a design
      system rots. --s8 and --s9 had no equivalent and became literals.

   2. CONTROL BOUNDARIES MOVED TO --control-bd. They were bounded by
      --bd-strong, which was 5.05:1 under Option F and is 1.58:1 under the
      locked palette. Moving them unchanged would have carried the invisible
      outline bug from index.html onto the browse page and every page after it.
      That bug was shipped for an hour this afternoon and is the reason this
      conversion is not a copy and paste.

   3. THIRTEEN DECLARATIONS WERE RAISED TO 16px, because the design system guard
      refuses anything smaller in this file and the floor is locked. They were
      12px, 13px, 14px and 15px, on the filter legends, the rate line, the tags,
      the pills and the check marks. This is a visible change to the landing
      page and the founder was told: it fixes thirteen of the sixteen floor
      breaches recorded against that page.
   ══════════════════════════════════════════════════════════════════════════ */





/* ---------- buttons: 56px primary, 48px standard, per the touch-target rule ---------- */
.hds .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:56px;padding:0 var(--sp-5);border-radius:var(--r-sm);
  background:var(--brand);color:var(--on-brand);border:2px solid var(--brand);
  font:600 19px/1 var(--font-body);cursor:pointer;text-decoration:none;white-space:nowrap;
}


.hds .btn:hover{background:var(--brand-hover);border-color:var(--brand-hover)}


.hds .btn.sec{background:transparent;color:var(--brand);border-color:var(--brand)}


.hds .btn.sec:hover{background:var(--brand-tint)}


.hds .btn.sm{min-height:48px;font-size:16px;padding:0 var(--sp-4)}


.hds .btn.wide{width:100%}


.hds .searchcard{background:var(--card);border:2px solid var(--control-bd);border-radius:18px;padding:var(--sp-5);max-width:860px}


.hds .searchcard .lbl{display:block;font-weight:700;font-size:16px;color:var(--t1);margin-bottom:var(--sp-1)}


.hds .fhint{display:block;font-size:16px;color:var(--t2);margin-bottom:var(--sp-2)}


.hds .srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4);align-items:end;max-width:620px}


.hds .fld input,.hds .fld select{
  width:100%;min-height:56px;padding:0 var(--sp-4);font:400 19px/1 var(--font-body);color:var(--t1);
  background:var(--card);border:2px solid var(--control-bd);border-radius:var(--r-sm);appearance:none;
}


.hds .fld select{background-image:linear-gradient(45deg,transparent 50%,var(--t2) 50%),linear-gradient(135deg,var(--t2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;background-size:6px 6px;background-repeat:no-repeat;padding-right:var(--sp-7)}


/* SEVENTEEN PIXELS IS ON NO SCALE, and there were four of them in this file.
   The scale is 16 / 19 / 22 / 24 / 30 / 38, and 17 sits between the two sizes
   it is nearest, so a checkbox row read one pixel apart from the paragraph above
   it for no reason anybody could state. Found 31 Aug 2026 by reading the
   COMPUTED type off the landing page rather than the source: forty-five elements
   at 17px, all of them inside the panel a family fills in.

   multi-select: checkboxes, never a multiple-choice dropdown */
.hds .disc{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:48px;margin-top:var(--sp-4);
  background:none;border:0;padding:0;cursor:pointer;color:var(--brand);
  font:700 var(--fs-body)/1 var(--font-body);text-align:left}


.hds .disc:hover{text-decoration:underline}


.hds .disc .chev{display:inline-block;transition:transform .12s;font-size:16px}


/* .chev HAD NO BASE RULE AT ALL until 31 Aug 2026: the glyph it contained
   carried its own size and baseline, so the only thing written here was the
   rotation. Replacing that glyph with an SVG, which the brand rules require,
   left it with nothing to size or align it. */
.hds .chev{display:inline-flex;align-items:center;justify-content:center;flex:none;
  transition:transform .15s ease}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}
.hds .disc[aria-expanded="true"] .chev{transform:rotate(90deg)}


.hds .disc .cnt{color:var(--t2);font-weight:400}


.hds .needpanel{margin-top:var(--sp-4);background:var(--surface);border:1px solid var(--control-bd);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);column-gap:var(--sp-6)}


.hds .needpanel[hidden]{display:none}
@media(min-width:760px){

 .hds .needpanel{columns:2}

 .hds .rail-needs{columns:1}
}


.hds .needgrp{break-inside:avoid;margin-bottom:var(--sp-4)}


.hds .needgrp:last-child{margin-bottom:0}


.hds .needgrp legend{font:700 16px/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--t2);padding:0;margin-bottom:var(--sp-2)}


.hds .needgrp{border:0;padding:0;margin-inline:0}


/* 48px, NOT 44. Measured 31 Aug 2026 while bringing the landing page onto the
   scale: this is the row a family taps to say what help they need, on the first
   screen of the product, and it sat FOUR PIXELS UNDER the locked floor. The
   button guard never saw it because a .cb is a <label>, not a <button>. */
.hds .cb{display:flex;align-items:flex-start;gap:var(--sp-3);min-height:var(--tap-min);
  padding:var(--sp-1) 0;cursor:pointer;font-size:var(--fs-body)}


.hds .cb input{width:26px;height:26px;flex:none;margin:var(--sp-1) 0 0;accent-color:var(--brand);cursor:pointer}


.hds .rail-needs{padding:var(--sp-3) var(--sp-4);font-size:16px}


.hds .rail-needs .cb{font-size:16px;min-height:40px}


.hds .rail-needs .cb input{width:22px;height:22px}


.hds .hint{font-size:16px;color:var(--t2);margin-top:var(--sp-3)}


.hds .tick{width:24px;height:24px;flex:none;border-radius:50%;background:var(--ok-bg);border:1px solid var(--control-bd);
  display:grid;place-items:center;color:var(--ok);font-size:16px;font-weight:700}






/* ---------- RESULTS ---------- */
.hds .resbar{background:var(--surface);border-bottom:1px solid var(--bd);padding:var(--sp-5) 0}


.hds .resbar h1{font-size:clamp(24px,2.6vw,32px)}


.hds .reslayout{display:grid;grid-template-columns:264px 1fr;gap:var(--sp-6);padding-block:var(--sp-6)}

/* THE FILTER BUTTON IS A PHONE CONTROL, AND WITHOUT THIS LINE IT ATE THE DESKTOP
   LAYOUT. Found 30 Aug 2026 by looking at the rendered page rather than the CSS,
   and it had been LIVE since that afternoon.

   .reslayout has three children: this button, the rail, and the results. With no
   rule hiding the button it took cell one, which pushed the RAIL into the wide
   column and the fifteen carers into the 264px one meant for the rail. A column
   of cards 264px wide and 5,185px tall, with the filters spread across the space
   the people were supposed to occupy.

   Nothing caught it because every check asked whether the elements were present
   and readable. They were. They were in the wrong places. */
.hds .filterbtn{display:none}


.hds .rail{align-self:start;position:sticky;top:var(--sp-4)}


.hds .rail h2{font-size:var(--fs-h3);margin-bottom:var(--sp-4)}


.hds .fgroup{margin-bottom:var(--sp-5)}


.hds .fgroup legend,.hds .fgroup .lbl{font-weight:700;font-size:16px;color:var(--t1);margin-bottom:var(--sp-2);padding:0}


.hds .fgroup select{width:100%;min-height:48px;padding:0 var(--sp-3);font:400 16px/1 var(--font-body);color:var(--t1);
  background:var(--card);border:2px solid var(--control-bd);border-radius:var(--r-sm)}


.hds .fnote{font-size:16px;color:var(--t2);margin-top:var(--sp-2)}


.hds .chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);border:0;padding:0;margin:0}


/* Rule 2: tints are 1.15:1 to 1.27:1 on card. Every chip carries a bd-strong border, never a fill alone. */
.hds .chip{min-height:48px;display:inline-flex;align-items:center;padding:0 var(--sp-4);border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--control-bd);color:var(--t1);font:600 16px/1 var(--font-body);cursor:pointer}


.hds .chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}


.hds .chip[aria-pressed="true"]::before{content:"\2713\00a0";font-weight:700}



.hds .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:var(--sp-4)}


.hds .pcard{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-md);padding:var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-3);text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}


.hds .pcard:hover{border-color:var(--control-bd);box-shadow:0 2px 14px rgba(42,34,20,.09)}


.hds .ptop{display:flex;gap:var(--sp-3);align-items:flex-start}


.hds .ptop > span:nth-child(2){min-width:0;flex:1}


.hds .av{position:relative;overflow:hidden;width:56px;height:56px;flex:none;border-radius:50%;display:grid;place-items:center;
  font:700 19px/1 var(--font-body);color:var(--on-brand);background:var(--brand)}


/* HER PHOTOGRAPH SITS OVER THE INITIALS rather than replacing them, and that is
   what makes the fallback free: a carer with no photo, or one whose photo fails
   to load and hides itself, shows the coloured circle that was always behind it.
   No broken image icon, no empty grey box, and no second code path.
   Added 30 Aug 2026 with the fix in page-front-door.js, which had been fetching
   every face on every search and drawing none of them. */
.hds .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}


.hds .pname{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;margin:0;line-height:var(--lh-head)}


.hds .pmeta{font-size:16px;line-height:1.45;color:var(--t2);margin:var(--sp-1) 0 0}


.hds .prate{margin-left:auto;text-align:right;flex:none}


.hds .prate .from{display:block;font-size:16px;color:var(--t2);line-height:1.1}


.hds .prate b{font-family:var(--font-display);font-size:var(--fs-h3);display:block}


.hds .prate span{font-size:16px;color:var(--t2)}


.hds .tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:0;list-style:none}


.hds .tag{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);
  font-size:16px;font-weight:600;background:var(--a4-bg);border:1px solid var(--control-bd);color:var(--t1)}


.hds .tag.chk{background:var(--ok-bg);color:var(--ok)}


.hds .why{margin:0;font-size:16px;color:var(--t2);line-height:1.45}


.hds .warnbox{margin:var(--sp-4) 0 0;padding:var(--sp-4);background:var(--warn-bg);border:1px solid var(--control-bd);
  border-radius:var(--r-sm);font-size:var(--fs-body);color:var(--t1);line-height:var(--lh-body)}


.hds .widened{background:var(--info-bg);border:1px solid var(--control-bd);border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4);font-size:var(--fs-body);color:var(--t1)}


.hds .empty{background:var(--card);border:2px solid var(--control-bd);border-radius:var(--r-md);padding:var(--sp-6);max-width:620px}


.hds .empty h2{font-size:22px;margin-bottom:var(--sp-3)}


.hds .back{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:48px;background:none;border:0;
  color:var(--brand);font:600 16px/1 var(--font-body);cursor:pointer;padding:0;margin-bottom:var(--sp-4)}


.hds .back:hover{text-decoration:underline}


.hds .phead{display:flex;gap:var(--sp-4);align-items:flex-start;flex-wrap:wrap}


.hds .phead .av{width:80px;height:80px;font-size:var(--fs-h2)}


.hds .pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}


.hds .pill{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);
  font-size:16px;font-weight:600;background:var(--card);border:1px solid var(--control-bd)}


.hds .pill.ok{background:var(--ok-bg);color:var(--ok)}


.hds .box{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-md);padding:var(--sp-5)}


.hds .box p:last-child{margin-bottom:0}


.hds .list{margin:0;padding:0;list-style:none}


.hds .list li{display:flex;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--bd);align-items:flex-start}


.hds .list li:last-child{border-bottom:0;padding-bottom:0}


.hds .list li:first-child{padding-top:0}


.hds .ck{width:24px;height:24px;flex:none;border-radius:50%;background:var(--ok-bg);border:1px solid var(--control-bd);
  display:grid;place-items:center;color:var(--ok);font-size:16px;font-weight:700}

/* NOT DONE, ADDED 6 SEP 2026, AND IT IS A DEFECT FIX RATHER THAN DECORATION.
   The six checks on a carer profile draw a tick or a cross in this marker, and
   until today BOTH sat in the same green success circle. "Two references: not
   checked" and "DBS check: checked" were the same colour, so a list with two
   things missing read at a glance as a list where everything was fine, which is
   the opposite of what the label above it says.

   NEUTRAL RATHER THAN RED, DELIBERATELY. A red cross reads as a warning about
   the person. She has not finished her checks, which is a fact about how far
   along she is and not an accusation, and the whole point of showing families
   unfinished carers is that an unfinished carer is worth talking to.

   IT DIFFERS BY SHAPE AND BY TONE, never by hue alone, and it keeps its border
   rather than becoming a bare tint. Both are standing rules from the palette
   work: a status that only a colour tells apart is a status a colour blind
   reader cannot read at all. */
.hds .ck--no{background:var(--surface);color:var(--t2)}


.hds .lvl{margin-left:auto;font-size:16px;color:var(--t2);white-space:nowrap}


.hds .quote{font-family:var(--font-display);font-size:19px;line-height:1.55;color:var(--t1)}


.hds .stickycta{position:sticky;bottom:0;background:var(--page);border-top:2px solid var(--control-bd);
  padding:var(--sp-4) 0;margin-top:var(--sp-6);display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}


.hds .linkbtn{background:none;border:0;color:var(--brand);font:600 16px/1 var(--font-body);cursor:pointer;
  min-height:48px;text-decoration:underline;padding:0;display:inline-flex;align-items:center}
@media (max-width:900px){


  .hds .reslayout{grid-template-columns:1fr;gap:var(--sp-4)}


  /* On a phone the rail is closed by default, so this is the only way to it. */
  .hds .filterbtn{display:inline-flex}


  .hds .rail{position:static;display:none;background:var(--card);border:2px solid var(--control-bd);
    border-radius:var(--r-md);padding:var(--sp-5)}


  .hds .rail.open{display:block}


  .hds .srow{grid-template-columns:1fr}
}


/* ══════════════════════════════════════════════════════════════════════════
   THE CARER PANEL. Built 30 Aug 2026 to the founder's description: it opens on
   its own screen, it has an X, and it is not as wide as the whole window.

   THE RESULTS STAY BEHIND IT, DIMMED. Anna is comparing people. Losing her place
   in fifteen results to look at one of them is the thing to avoid, and closing
   puts her back exactly where she was, scrolled to the same card.

   820px, AND THAT IS READABILITY RATHER THAN TASTE. A line of text wider than
   about 70 characters is measurably harder to read, and this panel is mostly
   prose: her own words, what she can do, what Hibant has checked. 820px holds
   roughly 68. On a phone it is the whole width because there is nothing else for
   it to be.

   THE CLOSE CONTROL HAS ITS OWN ROW. It was absolutely positioned at the top
   right in the preview, and the rate block is ALSO at the top right, so the X
   landed on "from GBP 19 an hour". Moving it a few pixels works until the next
   piece of content arrives. A row of its own cannot collide with anything.
   ══════════════════════════════════════════════════════════════════════════ */

#v-profile.panel {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--sp-5) var(--sp-4);
  overflow-y: auto;
  background: rgba(42, 34, 20, .45);
}

#v-profile.panel[hidden] { display: none; }


#v-profile.panel .prof {
  background: var(--card); border: 1px solid var(--bd);
  border-radius: var(--r-lg); padding: var(--sp-6);
  max-width: 820px; width: 100%; margin: 0 auto;
  box-shadow: 0 18px 60px rgba(42, 34, 20, .28);
}


.hds .panel-bar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-3); }

.hds .panel-close {
  width: var(--tap-min); height: var(--tap-min); border-radius: 50%;
  border: 1px solid var(--control-bd); background: var(--card);
  color: var(--t1); font-size: var(--fs-h3); line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: none;
}

.hds .panel-close:hover { background: var(--surface); }

.hds .panel-close:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (max-width: 640px){

  #v-profile.panel { padding: 0; }

  #v-profile.panel .prof { border-radius: 0; min-height: 100%; padding: var(--sp-5); }
}

/* THE WAITING LINE, added 31 Aug 2026. Every screen in the portal wrote its own
   `<div style="padding:40px;text-align:center">Loading...</div>`, which is nine
   copies of one idea and nine places for the padding to drift. It reserves real
   height so the screen does not jump when the content lands. */
.ds-load {
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--t3);
  font-size: var(--fs-body);
}