/* shared/portal-family-care.css
 *
 * Styles that belong to Anna's Care tab and nowhere else. Everything reusable
 * lives in hibant-ds.css; this file may only consume its tokens and must never
 * introduce a colour, a size or a spacing of its own. The design system guard
 * checks the tokens; this file is checked by reading it.
 *
 * ONE RULE IS LOAD BEARING AND EASY TO BREAK BY ACCIDENT:
 * --t3 is 5.55:1 on --page, which passes AA and MISSES the 6.4:1 older-eye
 * target. So secondary text on the page ground uses --t-min, which points at
 * --t2. --t3 is only safe on --card.
 */

/* RENAMED FROM .fc, 23 Aug 2026, AND ONLY A BROWSER COULD HAVE FOUND IT.
   The old hibant.css then defined `.fc p, .fc a` at 14px, opacity .7, white,
   for a FOOTER COLUMN on a dark footer. (Both the size and the colour were
   fixed on 30 Aug 2026 when the footer went light and the 16px floor was
   applied across the site, so that rule no longer says what it says here. The
   collision below is what matters and it is unchanged.) This module's root was also .fc, so the old stylesheet reached
   straight into the rebuilt screen and rendered Anna's day-one message as
   white at 70 percent on honey, at 14px, effectively invisible and below the
   16px floor.
   Checked the wrong direction first: the module stylesheets were verified to
   have no bare element selectors, which stops them leaking OUT. Nothing was
   checking what leaks IN. The fc-* children below do not collide and are left
   alone. */
.hfc { padding: var(--sp-5) var(--sp-4) var(--sp-7); max-width: var(--portal-measure); margin: 0 auto; }

/* ── THE BAND ───────────────────────────────────────────────────────────────
   Built 30 Aug 2026 to the founder's reference. The greeting, the heading and
   the tabs sit on an illustrated ground rather than on the bare page.

   THE NIGHT VARIANT IS A CONTRAST FIX AND NOT A MOOD. The ink the bright band
   uses measures 1.1 to 1 against the dark sky, which is invisible, so at night
   the band redefines its own ink rather than inheriting the page's. The tokens
   below are set ON THE BAND, so nothing outside it changes and the rest of the
   screen is untouched at either hour.

   TWO PICTURES, NOT FOUR, AND THAT IS AN OPEN ITEM RATHER THAN A DECISION. The
   29 Aug note records a ruling for four scenes drawn in code: a low sun, a high
   sun with rays, a deep sunset and a crescent moon. Two webp files exist and
   that is what this uses. See the design note. */
.fc-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg, 16px);
  background: var(--band);
  padding: var(--sp-6) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.fc-band__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
/* The content rides above the picture. Without this the band paints over it. */
.fc-band__body { position: relative; }

/* NIGHT. Cream ink at 13.7 to 1 on the dark sky, and the greeting takes the
   peach from the logo at 8.1 to 1. Both measured, not chosen by eye. */
.fc-band.is-night { background: #241C12; }

/* THE INK IS REDEFINED ON THE HEADING, NOT ON THE WHOLE BAND, 31 Aug 2026.
   It was on the band, and a token set on a container reaches EVERY descendant,
   including the ones sitting on their own pale fill. The chips take
   `color: var(--t1)` and have a cream background, so cream ink landed on cream:
   "Today" measured 1.04:1 and the other two 1.17:1. All three labels invisible,
   which is exactly what the founder saw. Scoping it to .fc-head puts the cream
   where the dark sky is and leaves everything else on the page's own ink. */
.fc-band.is-night .fc-head {
  --t1: #FDFAF8;
  --t2: #E4DACC;
  --t-min: #F8B583;
}
.fc-band.is-night .fc-chip:not([aria-selected="true"]) {
  background: rgba(253, 250, 248, .92);
  border-color: transparent;
}

.fc-head { margin-bottom: var(--sp-4); }
.fc-greet { color: var(--t-min); font-weight: 500; margin-bottom: var(--sp-1); }
.fc-head h1 { font-size: var(--fs-h2); }

/* The three chips are real tabs. Each is a full standard target. */
.fc-chips { display: flex; gap: var(--tap-gap); margin-bottom: var(--sp-5); flex-wrap: wrap; }
/* QUALIFIED 25 Aug 2026. As a bare class this was (0,1,0) and lost to
   `.hds button:not(.ds-btn)` at (0,2,1), so the size written here never
   applied and the control rendered at the 48px floor instead. Found by a new
   guard in test/design-system.test.js after the same trap was hit a
   thirteenth time, this time on a tap target rather than a heading.
   `.hds` plus a class plus :not() is (0,3,0), which beats it outright rather
   than relying on which stylesheet happens to load last. */
.hds .fc-chip:not(.ds-btn) {
  min-height: var(--tap-min); padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-min); font-weight: 700;
  background: var(--card); color: var(--t1);
  border: 2px solid var(--bd-strong);
}
/* Selected is carried by fill, ink AND weight, never by hue alone.
   QUALIFIED 31 Aug 2026. As `.fc-chip[aria-selected="true"]` this was (0,2,0)
   and LOST to `.hds .fc-chip:not(.ds-btn)` at (0,3,0), so the selected tab never
   got its fill: all three chips drew the same cream pill and "which tab am I on"
   was carried by a faint border alone. The fourteenth time this trap has been
   hit. (0,4,0) beats it outright rather than relying on load order. */
.hds .fc-chip[aria-selected="true"]:not(.ds-btn) {
  background: var(--brand); color: var(--on-brand); border-color: var(--brand);
}

.fc-panel > * + * { margin-top: var(--sp-4); }

/* TWO CARDS, SIDE BY SIDE WHERE THERE IS ROOM. Founder: "they should have been
   side by side in bigger boxes, not, like, one on top of the other."
   NOT a blanket grid on .fc-panel, which was the tempting one line. Schedule is
   a heading followed by its list, twice, and auto-placing those would tear each
   heading away from the thing it names. So the pairing is stated where it is
   meant, and the hero above it still spans the full width because what is
   happening right now is the one thing on the screen that must not be halved.
   auto-fit can never make more than two tracks here because there are only two
   children, so this needs no breakpoint: below 48rem plus the gap they stack. */
.fc-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: var(--sp-4);
  /* STRETCH, SO THE PAIR IS A PAIR. It was `start`, which top aligned them and
     left one card 85px shorter than the other. The founder: "the boxes are not
     aligned. Not very happy with that." Two cards of the same standing that end
     at different heights read as an accident. */
  align-items: stretch;
}

/* AND THE SECOND CARD WAS PUSHED SIXTEEN PIXELS DOWN, which is the misalignment
   he actually saw. `.ds-card + .ds-card { margin-top: var(--sp-4) }` in
   hibant-ds.css is (0,2,0) and stacks cards vertically; `.fc-pair > * + *` was
   (0,1,0) and lost to it. In a grid that margin is not spacing between rows, it
   is an offset on one cell. Three classes deep so it wins outright rather than
   on which stylesheet happens to load last. */
.fc-pair > .ds-card + .ds-card,
.fc-pair > * + * { margin-top: 0; }
/* Qualified so it actually applies. As a bare class this was (0,1,0) and lost
   to `.hds h1-h4` at (0,1,1), so the size written here never took effect.
   Found 24 Aug 2026 by the first guard to compare a module's headings with
   the system's. */
.fc .fc-h { font-size: var(--fs-lead); margin-bottom: var(--sp-3); }
.fc-panel > .fc-h + * { margin-top: 0; }

/* ── The live visit. The first thing on the screen, on purpose. ──────────── */

/* ── THE HERO, AND WHY THE CHIP IS BELOW THE TEXT ──────────────────────────
 *
 * MEASURED 28 Aug 2026 on the real module: phone 368, hero 334, avatar 52,
 * the "Checked in" chip 113, and the headline left with SIXTY FOUR PIXELS,
 * wrapping onto four lines. The one line Today exists to answer, who is here
 * right now, was the least readable thing on the screen.
 *
 * THE CHIP WAS NOT DELETED, WHICH WAS THE OBVIOUS MOVE AND THE WRONG ONE. It
 * says four things and only "Checked in" repeats the time line beneath it.
 * "No check in recorded", "Note on the way" and "Due now" do not, and the
 * first of those exists because of a 22 Aug fix: this screen used to show a
 * green tick whenever the clock was inside the visit window, so a morning
 * Carmen never arrived read to Anna as though she had. Deleting the chip would
 * have deleted that.
 *
 * So it moved inside the body, under the time. The headline now gets 232
 * pixels and two lines, and the warn state is readable on the one day it is
 * the important thing on the screen.
 *
 * align-items is flex-start rather than centre because the body is now taller
 * than the avatar in every state, and centring floats the avatar away from the
 * name it belongs to.
 */
.fc-hero {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--t1);
  background: var(--card);
}
/* An empty state hero is a section, not a button: there is nothing to open. */
.fc-hero:not(button) { cursor: default; }
.fc-hero__chip { margin-top: var(--sp-2); }
.fc-hero__av {
  flex: none; width: 3.25rem; height: 3.25rem; border-radius: var(--r-pill);
  background: var(--a1-bg); color: var(--a1); border: 1px solid var(--a1);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-min);
}
.fc-hero__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

/* The empty hero has no avatar and no mark, so its body starts at the card's own
   edge rather than being indented past a gap where a face used to be. */
.fc-hero--empty { gap: 0; }
.fc-hero__kicker { font-size: var(--fs-min); font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .04em; }
/* WEIGHT 700, the same as a card title and the same as every heading in the
   design system. It was 400, so the most important line on the screen was
   lighter than the cards beneath it. Founder: "there is no sort of uniformity
   here." */
.fc-hero__who { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-head); font-weight: 700; }
/* THE HERO'S THIRD LINE IS THE BODY OF THE BOX, and it was set as a meta line:
   16px on the faintest ink, while the two cards below it said the same kind of
   thing at 19px on the body ink. Same role, two sizes, side by side on one
   screen, which is what the founder kept pointing at.

   It carries a TIME on a live visit ("9:00 to 12:00, checked in at 8:58") and a
   SENTENCE on an empty one. Both are the box telling you what is going on, and
   the box's body is one treatment. */
.fc-hero__when { font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); color: var(--t2); }

/* ── Rows ────────────────────────────────────────────────────────────────── */

.hds .fc-row:not(.ds-btn) {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; text-align: left; cursor: pointer; min-height: var(--tap-primary);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--t1);
  background: var(--card);
}
.fc-row__icon { flex: none; width: var(--tap-min); height: var(--tap-min);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--bd-strong); color: var(--t1); }
.fc-row__icon svg { width: var(--glyph); height: var(--glyph); }
.fc-row__icon--info { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.fc-row__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fc-row__title { font-weight: 700; }
.fc-row__sub { font-size: var(--fs-min); color: var(--t3); }
.fc-row__go { font-size: var(--fs-h3); color: var(--t3); line-height: 1; }

/* Rows inside a card group share one boundary rather than stacking borders. */
.fc-days { padding: 0; }
.fc-days .fc-row { border: none; border-radius: 0; border-bottom: 1px solid var(--bd); padding: var(--sp-3) var(--sp-4); }
.fc-days .fc-row:last-child { border-bottom: none; }

/* ── Schedule ────────────────────────────────────────────────────────────── */

.hds .fc-day:not(.ds-btn) {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; text-align: left; cursor: pointer; min-height: var(--tap-primary);
  padding: var(--sp-3) var(--sp-4); background: var(--card);
  border: none; border-bottom: 1px solid var(--bd);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--t1);
}
.fc-day:last-child { border-bottom: none; }
.fc-day__label { flex: none; width: 4.25rem; font-weight: 700; font-size: var(--fs-min); }
.fc-day__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fc-day__summary { font-size: var(--fs-min); }
.fc-day__sub { font-size: var(--fs-min); color: var(--t3); }

.fc-team { padding: 0; }
.hds .fc-member:not(.ds-btn) {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; text-align: left; cursor: pointer; min-height: var(--tap-primary);
  padding: var(--sp-3) var(--sp-4); background: var(--card);
  border: none; border-bottom: 1px solid var(--bd);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--t1);
}
.fc-member:last-child { border-bottom: none; }
.fc-member__av {
  flex: none; width: var(--tap-min); height: var(--tap-min); border-radius: var(--r-pill);
  background: var(--a3-bg); color: var(--a3); border: 1px solid var(--a3);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-min);
}
.fc-member__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fc-member__name { font-weight: 700; }
.fc-member__when { font-size: var(--fs-min); color: var(--t3); }

/* ── What she did, and when. The loop closing on Anna's side. ─────────────── */
/*
 * THREE STATES, THREE SHAPES, AND WORDS BESIDE EACH. A tick that happened, a
 * plus for something the carer chose to do that was not in the plan, and an
 * open circle for one that did not. Nothing here encodes meaning in colour
 * alone: the mark differs in SHAPE, and the words underneath say it again.
 */
/* A LABEL INSIDE A BOX SITS AT THE ROW LEVEL, not two levels below everything.
   It was 16px on --t2 while the row titles beside it were 19px w700 on --t1, so
   "What she did, and when" read as smaller and greyer than the rows it
   introduces. One level, one treatment. */
.hfc .fc-steps__h {
  font-size: var(--fs-body); font-weight: 700; color: var(--t1);
  font-family: var(--font-body); letter-spacing: 0;
  margin: var(--sp-4) 0 var(--sp-2);
}
.fc-steps { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.fc-step {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-2) 0;
}
.fc-step + .fc-step { border-top: 1px solid var(--bd); }
.fc-step__mark {
  flex: none; width: 1.5rem; text-align: center;
  font-size: var(--fs-min); font-weight: 700; line-height: 1.6;
}
.fc-step.is-done  .fc-step__mark { color: var(--ok); }
.fc-step.is-added .fc-step__mark { color: var(--info); }
.fc-step.is-not   .fc-step__mark { color: var(--t3); }
.fc-step__body { flex: 1 1 auto; min-width: 0; }
.fc-step__label { display: block; font-size: var(--fs-min); color: var(--t1); }
.fc-step.is-not .fc-step__label { color: var(--t2); }
.fc-step__note { display: block; font-size: var(--fs-min); color: var(--t2); margin-top: 2px; }
.fc-step__at {
  flex: none; font-size: var(--fs-min); color: var(--t2);
  font-variant-numeric: tabular-nums;
}
.fc-steps__foot { margin-top: var(--sp-3); }

/* ── Inside a day. Added 26 Aug 2026 with cancelling a single visit. ────────
   The row above has always said "tap to see inside the day" and its handler
   was an empty function, so nothing ever opened. */

.fc-inside {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4); margin: 0 0 var(--sp-3);
  border: 1px solid var(--bd-strong); border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.fc-inside__row {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.fc-inside__when { font-size: var(--fs-body); font-weight: 700; }
.fc-inside__who { font-size: var(--fs-min); color: var(--t2); }
/* ── THE QUIET DESTRUCTIVE CONTROL SITS AT THE END, in both places it appears.
   Corrected and widened 9 Sep 2026.

   THE RULE COULD NOT MATCH ITS OWN BUTTON. It was qualified `:not(.ds-btn)` to
   beat `.hds button:not(.ds-btn)`, and the button it is written for HAS carried
   `ds-btn ds-btn--quiet` all along, so the selector excluded exactly the element
   it was for. Neither the tap size nor the push to the end ever applied, which
   is why the cancel sat jammed against the carer's name instead of at the far
   end of the row. `.hds .fc-inside__x` is (0,2,0) and beats `.ds-btn--quiet` at
   (0,1,0) on its own, so no qualifier is needed.

   AND THE VISIT SCREEN NOW OBEYS THE SAME RULE, which is what the comment
   always said the design was: never the thing her thumb lands on first. On both
   screens the way out of something sits away from the way into it. */
.hds .fc-inside__x,
.hds .fc-visit__off {
  min-height: var(--tap-primary); margin-left: auto;
  /* AND IT HAS TO LOOK LIKE A CONTROL. Founder, 9 Sep 2026: it "should also be
     in some sort of circle or something that highlights that this is a
     clickable icon. Right now it is just plain text."

     QUIET WAS RIGHT AND INVISIBLE WAS NOT. A transparent background with no
     edge reads as a sentence, and this product is designed around elderly and
     disabled people using an application, for whom an unmarked control is not
     a subtle control, it is simply not there.

     --control-bd is the token whose only job is a control's edge, measured at
     4.10 on card and 3.95 on page, so nothing here invents a colour. The text
     stays --brand rather than --t1, so it reads as unmistakably pressable and
     still plainly the lesser of the two controls beside it. */
  border-color: var(--control-bd);
  padding: var(--sp-3) var(--sp-5);
}

/* The facts and the controls under them were touching. A dl has no bottom
   margin here on purpose, so the space belongs to whatever follows it. */
.hds .fc-facts + .ds-actions { margin-top: var(--sp-5); gap: var(--sp-4); }
/* A cancelled visit is SHOWN, not hidden: a day that quietly loses one is a day
   she cannot check against what she was told. Dimmed, and the chip says why, so
   it never depends on the dimming alone. */
.fc-inside__row.is-off .fc-inside__when { text-decoration: line-through; color: var(--t2); }


/* ── WHAT HAPPENED WITH THE MEDICINES, on the screen Anna opens every day ──
   New 28 Aug 2026. This was a chip gated on a key nothing ever set, so it could
   not draw for any note ever written, and nothing in the product had ever
   recorded a medicine outcome to put in it. */
.fc-meds { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.fc-med {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--page);
}
.fc-med__name { font-weight: 700; color: var(--t1); }
.fc-med__dose { font-weight: 400; color: var(--t2); }
.fc-med__prn {
  font-weight: 400; font-size: var(--fs-min); color: var(--t2);
  border: 1px solid var(--bd-strong); border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}
.fc-med__what { font-size: var(--fs-min); color: var(--t1); }
.fc-med__at { color: var(--t2); font-weight: 700; }
/* Why she declined it, which is the question Anna would ask next. */
.fc-med__why {
  font-size: var(--fs-min); color: var(--t1);
  padding-left: var(--sp-2); border-left: 2px solid var(--bd-strong); margin-top: 2px;
}

/* ── THE NIGHT, on the screen Anna opens in the morning ────────────────────
   New 28 Aug 2026 with the overnight note shape. The summary sentence first,
   because at seven in the morning she wants to know how the night went before
   she wants the detail. */
.fc-night__sum { font-weight: 700; color: var(--t1); margin: 0 0 var(--sp-2); }
.fc-night__set { margin: 0 0 var(--sp-2); }
.fc-night { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--sp-2); }
.fc-nrow {
  display: grid; grid-template-columns: 3.6rem 1fr; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm);
}
.fc-nrow__at { font-weight: 700; color: var(--t2); font-size: var(--fs-min); }
.fc-nrow__w { color: var(--t1); }
.fc-nrow__n { grid-column: 2; font-size: var(--fs-min); color: var(--t2); }
/* A timed moment she wrote in her own words reads differently from a scheduled
   look-in, because it is a different kind of fact. */
.fc-nrow--event { background: var(--page); }

/* How her mother seemed. New 28 Aug 2026: care_notes.mood has existed since the
   beginning, fetched by two loaders, rendered by three screens, and written by
   nothing, so all three always showed a blank. */
.fc-mood { margin: 0 0 var(--sp-3); }
.fc-mood__k {
  font-size: var(--fs-min); font-weight: 700; color: var(--t2);
  text-transform: uppercase; letter-spacing: .5px;
}
.fc-mood__v { font-weight: 700; color: var(--t1); }

/* When the carer arrived and when she left, on the day she looks back at.
   Evidence, never a billing input: hours come from the booking. */
.fc-inside__att { margin-left: var(--sp-2); }

/* ══════════════════════════════════════════════════════════════════════════
   THE CARE TEAM ON TODAY, 31 Aug 2026, on the founder's instruction:
   "your care team comes to the home Today page. Where it says find a carer,
   that could be the slot with your care team ... it'll probably be boxes with
   each person's name. If you click on the box, you can open their profile ...
   and underneath it, we can just put the find a carer as a long solid bar."

   Everything below consumes the design system's tokens and the box anatomy
   written down the same day. Nothing here defines a colour or a type size.
   ══════════════════════════════════════════════════════════════════════════ */

/* A CARER IS A BOX. They wrap and share the width, so two carers make two wide
   boxes and five make a tidy grid rather than a list that runs off the card. */
.fc-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.hds .fc-person:not(.ds-btn) {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: var(--tap-primary);
  padding: var(--sp-3);
  border: 1px solid var(--control-bd); border-radius: var(--r-md);
  background: var(--surface); color: var(--t1);
  font-family: var(--font-body); text-align: left; cursor: pointer;
}
.hds .fc-person:not(.ds-btn):hover { border-color: var(--brand); background: var(--brand-tint); }
.fc-person:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.fc-person__av {
  width: var(--tap-min); height: var(--tap-min); border-radius: var(--r-pill);
  background: var(--a1-bg); color: var(--a1); border: 1px solid var(--a1);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-min); margin-bottom: var(--sp-2);
}
.fc-person__name { font-size: var(--fs-body); font-weight: 700; }
.fc-person__what { font-size: var(--fs-min); font-weight: 400; color: var(--t3); }
.fc-people__more { margin-top: var(--sp-3); }

/* FIND A CARER, A BAR. Wide on a laptop with the control on the right, stacked
   on a phone, and it is a .ds-card so it is the same box as everything else. */
.fc-bar {
  margin-top: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
}
.fc-bar__text { flex: 1 1 22rem; min-width: 0; }
.fc-bar__go { flex: none; }

/* THE SHEET. It pops out over the screen with one way to close it, which is the
   X. The backdrop is a sibling surface rather than a parent, so a click on the
   card behind it cannot fire through. */
.fc-sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 16, 11, .55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.fc-sheet__box {
  position: relative;
  width: 100%; max-width: 24rem;
  background: var(--card); color: var(--t1);
  border: 1px solid var(--bd-strong); border-radius: var(--r-lg);
  padding: var(--sp-5);
  max-height: 86vh; overflow-y: auto;
}
.hds .fc-sheet__x:not(.ds-btn) {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: var(--tap-min); height: var(--tap-min);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--t2); cursor: pointer;
}
.hds .fc-sheet__x:not(.ds-btn):hover { background: var(--surface); color: var(--t1); }
.fc-sheet__x:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.fc-sheet__av {
  display: flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border-radius: var(--r-pill);
  background: var(--a1-bg); color: var(--a1); border: 1px solid var(--a1);
  font-weight: 700; font-size: var(--fs-min); margin-bottom: var(--sp-3);
}
.fc-sheet__box .ds-btn { margin-top: var(--sp-4); }
@media (prefers-reduced-motion: no-preference) {
  .fc-sheet__box { animation: fc-sheet-in .16s ease-out; }
  @keyframes fc-sheet-in { from { transform: translateY(8px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* THE ROWS SIT INSIDE THE BOX, so the card's own padding is not doubled by the
   list's. Added 31 Aug 2026 when the section headings and trailing sentences
   came off the page and everything moved inside its box. */
.fc-days--inset {
  margin: var(--sp-4) calc(var(--sp-5) * -1) 0;
  border-top: 1px solid var(--bd);
}
.fc-days--inset .fc-row,
.fc-days--inset .fc-day {
  border-radius: 0; border-left: 0; border-right: 0;
  padding-left: var(--sp-5); padding-right: var(--sp-5);
}
.fc-days--inset > *:last-child { border-bottom: 0; }
.fc-days__all { margin-top: var(--sp-4); }

/* A row that is not a control still lines up with the ones that are. */
.fc-row--waiting {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; min-height: var(--tap-primary);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--bd);
}


/* THE WAY BACK OUT OF A DRILL DOWN. Above the box, not inside it, because it
   leaves the screen rather than acting on it, and it names where it goes rather
   than saying "Back": a person who arrived from Schedule should read the word
   Schedule. The tab bar stays live underneath, so leaving sideways works too. */
.fc-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  margin-left: calc(var(--sp-3) * -1);   /* the glyph optically aligns to the box edge */
  font-weight: 700;
}
.fc-back svg { flex: none; }

/* ── RAISING A CONCERN, revealed rather than prompted ──────────────────────
   Same shape as the admin decline box: a browser prompt cannot be styled, read
   out by a screen reader, or cancelled cleanly on a phone. */
.fc-concern {
  margin-top: var(--sp-4);
  border-top: 2px solid var(--alert);
  padding-top: var(--sp-3);
}
.fc-concern[hidden] { display: none; }
.fc-concern .ds-meta { margin: var(--sp-1) 0 var(--sp-2); }
.fc-concern__problem { color: var(--alert); font-weight: 700; margin: var(--sp-2) 0 0; }

/* ── THE CARER SHEET'S OWN PROFILE, 7 Sep 2026 ─────────────────────────────
   The last dead control. Everything here is layout for content that arrives on
   a second fetch, so every rule has to look right when the element is absent:
   no reserved boxes, no skeletons, nothing that leaves a hole if the profile
   never lands. The chips reuse .hds .tag rather than restating it. */
.hds .fc-sheet__photo{
  display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;
  margin:var(--sp-3) auto 0;background:var(--surface);
}
.hds .fc-sheet__bio{
  margin:var(--sp-3) 0 0;color:var(--t2);
  /* Her own words, so they read as a quote rather than as product copy. */
  font-style:italic;max-width:var(--portal-reading);
}
.hds .fc-sheet__tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin:var(--sp-3) 0 0;padding:0;
}
.hds .fc-sheet__label{
  margin:var(--sp-4) 0 var(--sp-2);font-weight:700;
}
.hds .fc-sheet__checks{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-1);
  text-align:left;max-width:var(--portal-reading);
}
/* THE MARKER CHANGES, NOT ONLY THE WORDS. A list of six lines that differ only
   by the last two words reads as six things that are fine. Same lesson as the
   green circle that carried a cross for an hour on 6 Sep 2026. */
.hds .fc-sheet__checks li{
  position:relative;padding-left:1.35em;color:var(--t2);font-size:var(--fs-body);
}
.hds .fc-sheet__checks li::before{
  position:absolute;left:0;top:0;font-weight:700;
}
.hds .fc-sheet__checks li.is-yes::before{content:"\2713";color:var(--ok);}
.hds .fc-sheet__checks li.is-no::before{content:"\2715";color:var(--t3);}
.hds .fc-sheet__checks li.is-no{color:var(--t3);}

/* ── A BOX THAT OPENS, 9 Sep 2026 ───────────────────────────────────────────
 *
 * Founder: "the hover, the ability to click on the actual box." A card that
 * leads somewhere has to LOOK like it does before it is clicked, or the only
 * way to find out is to try.
 *
 * THE HEADING IS THE CONTROL AND THE CARD IS NOT. A card wrapped in a button
 * cannot hold the carer buttons inside it: a button inside a button is invalid
 * and every browser unnests it, which would have broken every carer tap on this
 * screen while looking fine. So the heading is the control, and the card only
 * carries the hover.
 */
.fc-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2, 8px); }
.fc-card__head .ds-card__title { margin: 0 0 var(--sp-3, 12px); }
/* A GENEROUS HIT AREA ON A SMALL MARK. The chevron is 24px of ink; the target
 * around it is 48, which is the minimum this product holds itself to and the
 * one the 30 Aug nav regression was caught on. */
/* SPECIFIC ENOUGH TO ACTUALLY APPLY. Written first as `.fc-card__open`, which
 * scores (0,1,0) and loses to `.hds button:not(.ds-btn)` at (0,2,1), so the tap
 * size never applied at all and the guard said so. That is the SAME specificity
 * trap as the invisible button found on the live site earlier today: a rule
 * that is correct and outranked does nothing, silently. */
.hds .fc-card__head .fc-card__open {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; margin: -12px -12px 0 0; padding: 0;
  background: none; border: 0; cursor: pointer; color: inherit; flex: 0 0 auto;
}
.fc-card__go { font-size: var(--fs-3, 1.5rem); line-height: 1; color: var(--brand, #16544C); flex: 0 0 auto; }
.fc-card--opens { transition: border-color .15s ease, box-shadow .15s ease; }
.fc-card--opens:hover,
.fc-card--opens:focus-within { border-color: var(--brand, #16544C); box-shadow: 0 2px 10px rgba(22, 84, 76, .10); }
.fc-card--opens:hover .fc-card__open .ds-card__title { text-decoration: underline; text-underline-offset: 3px; }
/* MOTION IS OPT IN. The hover lift is decoration and a person who has asked
 * their machine for less movement should not get it anyway. */
@media (prefers-reduced-motion: reduce) { .fc-card--opens { transition: none; } }

/* ── THE FACTS ON THE VISIT SCREEN, 9 Sep 2026 ──────────────────────────────
 *
 * A definition list, because that is what this is: a label and its value, five
 * times. It rendered as unstyled stacked text on the first look, which is the
 * reason the preview exists.
 *
 * TWO COLUMNS WHERE THERE IS ROOM AND ONE WHERE THERE IS NOT. A label above its
 * value reads fine on a phone; side by side wastes the width on a laptop.
 */
.hds .fc-facts { margin: 0; display: grid; gap: var(--sp-3, 12px); }
.hds .fc-fact { display: grid; gap: 2px; }
.hds .fc-fact dt { color: var(--ink-quiet, #6B5B44); font-size: var(--fs-0, 1rem); }
.hds .fc-fact dd { margin: 0; font-weight: 600; }
@media (min-width: 640px) {
  .hds .fc-fact { grid-template-columns: 200px 1fr; align-items: baseline; gap: var(--sp-3, 12px); }
}

/* THE HERO IS A CONTROL AND MUST LOOK LIKE ONE, 9 Sep 2026.
 *
 * Founder, on day one: "the boxes don't look clickable." He was right about
 * which ones: the visit and the waiting box lead somewhere, and Find a carer
 * does not need it because it already carries a button that says so.
 *
 * The same treatment the openable cards get, so a person learns the rule once. */
.hds .fc-hero { transition: border-color .15s ease, box-shadow .15s ease; }
.hds .fc-hero:hover,
.hds .fc-hero:focus-visible { border-color: var(--brand, #16544C); box-shadow: 0 2px 10px rgba(22, 84, 76, .10); }
@media (prefers-reduced-motion: reduce) { .hds .fc-hero { transition: none; } }

/* THE WHOLE CARD IS THE TARGET, AND THE TARGET IS A REAL BUTTON.
 *
 * Founder: "if you click on the general box, nothing happens, you have to click
 * the tiny arrow, which might be hard to notice." The first fix put a data-fc
 * on the card div and the accessibility guard refused it, correctly: an
 * interactive thing must be a button or a link, or a keyboard cannot reach it
 * and a screen reader cannot name it.
 *
 * So the button is stretched over the card rather than the card being made
 * pretend-interactive. The chevron still shows where it is; the hit area is the
 * whole box.
 *
 * AND EVERYTHING WITH ITS OWN ACTION IS LIFTED ABOVE IT. Without this the
 * overlay would swallow every carer tap on the care team card, which is the
 * same "one control eating another" failure as a button inside a button. */
/* The forwarding is done in the click handler, not by an overlay: see the
 * long note in portal-family-care.js. This only has to say it is tappable. */
.hds .fc-card--opens { cursor: pointer; }
.hds .fc-card--opens .fc-person,
.hds .fc-card--opens .ds-btn,
.hds .fc-card--opens .fc-row { position: relative; z-index: 1; }

/* ── THE NOTIFICATION BOX, 9 Sep 2026 ──────────────────────────────────────
 *
 * Founder: "there should only be like two or maybe three boxes stacked on top
 * of each other, and then there should be an option view all." And on the
 * sizing: "if there's only two, then there will be a space ... where the third
 * one is going to be, there would just be a space there."
 *
 * SO EVERY SLOT IS THE SAME HEIGHT AND THE BOX DOES NOT RESIZE. He asked for
 * this on the care team too, where a single carer's card was a different size
 * from three of them. A box that changes shape as things arrive makes the page
 * jump under a person's thumb, which is the opposite of the calm this screen is
 * for. */
.hds .fc-notes__list { display: grid; gap: var(--sp-2, 8px); }
.hds .fc-note {
  display: flex; align-items: center; gap: var(--sp-3, 12px);
  min-height: 64px; padding: var(--sp-3, 12px);
  background: var(--surface, #FBF7F0); border: 1px solid var(--bd, #E4D8C6);
  border-radius: 10px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  width: 100%;
}
/* THE HELD SLOT IS NOT A CONTROL, so it does not light up. The hover rule was
 * written on .fc-note and the blank slot IS one, so hovering the empty third
 * space drew a full teal border and read as a button with nothing in it. */
.hds .fc-note:not(.fc-note--blank):hover,
.hds .fc-note:not(.fc-note--blank):focus-visible { border-color: var(--brand, #16544C); }
.hds .fc-note__icon { flex: 0 0 auto; display: inline-flex; color: var(--brand, #16544C); }
.hds .fc-note__body { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.hds .fc-note__title { font-weight: 600; }
.hds .fc-note__sub { color: var(--ink-quiet, #6B5B44); font-size: var(--fs-0, 1rem); }
.hds .fc-note__go { flex: 0 0 auto; color: var(--brand, #16544C); font-size: var(--fs-2, 1.25rem); }

/* THE HELD SLOT. Same height, no border, nothing to read: it reserves the room
 * a third notification would take rather than drawing an empty card, which
 * would look like something failed to load. */
/* AND IT CANNOT BE HOVERED, POINTED AT OR REACHED AT ALL. `cursor: default` was
 * not enough: the card around it is clickable, so the pointer landing on the
 * blank still hit the card's forwarding. pointer-events: none passes the click
 * through to the card, which is what should happen, and takes the hover with
 * it. It is already aria-hidden, so nothing reads it out either. */
.hds .fc-note--blank {
  border-color: transparent; background: none; cursor: default; pointer-events: none;
}

/* THE COUNT, BESIDE THE NAME. Red because he asked for red, and it is the only
 * red on this screen, so it does not have to shout to be seen. */
.hds .fc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; margin-left: var(--sp-2, 8px); padding: 0 7px;
  border-radius: 999px; background: var(--rust, #A8391B); color: #fff;
  font-size: var(--fs-0, 1rem); font-weight: 700; line-height: 1; vertical-align: middle;
}
/* Screen-reader-only text, so the badge says what the number means out loud. */
.hds .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;
}
.hds .fc-notes__more { margin-top: var(--sp-3, 12px); }

/* AND THE CARE TEAM IS MEASURED THE SAME WAY, on his ask: "sometimes James B is
 * big, sometimes it's small if there are other carers in there. They should all
 * be measured." One carer's card is now the same size as three of them. */
.hds .fc-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-2, 8px); }
.hds .fc-person { min-height: 96px; }