/* shared/portal-carer-work.css
 *
 * Carmen's Work tab. Consumes design system tokens only; introduces no colour,
 * size or spacing of its own.
 *
 * Secondary text on the page ground uses --t-min, never --t3, because --t3 is
 * 5.55:1 on --page and misses the 6.4:1 older-eye target. --t3 is card-only.
 */

.cw { padding: var(--sp-5) var(--sp-4) var(--sp-7); max-width: var(--portal-measure); margin: 0 auto; }

.cw-head { margin-bottom: var(--sp-4); }
.cw-greet { color: var(--t-min); font-weight: 500; margin-bottom: var(--sp-1); }
.cw-head h1 { font-size: var(--fs-h2); }
.cw-verified { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }

.cw-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 .cw-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);
}
.cw-chip[aria-selected="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

.cw-panel > * + * { margin-top: var(--sp-4); }
/* 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. */
.cw .cw-h { font-size: var(--fs-lead); margin-bottom: var(--sp-3); }
.cw-panel > .cw-h + * { margin-top: 0; }

/* ── A visit ─────────────────────────────────────────────────────────────── */

.cw-visit { display: flex; gap: var(--sp-4); align-items: flex-start; }
.cw-visit__time {
  flex: none; width: 4.5rem; display: flex; flex-direction: column; gap: 2px;
  padding-right: var(--sp-3); border-right: 1px solid var(--bd);
}
.cw-visit__from { font-weight: 700; font-size: var(--fs-body); }
.cw-visit__to { font-size: var(--fs-min); color: var(--t3); }
.cw-visit__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cw-visit__who { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-head); }
.cw-visit__type { font-family: var(--font-body); font-size: var(--fs-min); color: var(--t3); font-weight: 500; }
.cw-visit__where { font-size: var(--fs-min); color: var(--t3); }
.cw-visit__actions { margin-top: var(--sp-2); }

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

.hds .cw-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); background: var(--card);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--t1);
}
.cw-row__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cw-row__title { font-weight: 700; }
.cw-row__sub { font-size: var(--fs-min); color: var(--t3); }
.cw-row__go { font-size: var(--fs-h3); color: var(--t3); line-height: 1; }

/* ── Week ────────────────────────────────────────────────────────────────── */

.cw-days { padding: 0; }
.hds .cw-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);
}
.cw-day:last-child { border-bottom: none; }
.cw-day__label { flex: none; width: 4.25rem; font-weight: 700; font-size: var(--fs-min); }
.cw-day__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cw-day__summary { font-size: var(--fs-min); }
.cw-day__sub { font-size: var(--fs-min); color: var(--t3); }

/* ── Month ───────────────────────────────────────────────────────────────── */

.cw-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cw-month__head { text-align: center; font-size: var(--fs-min); font-weight: 700; color: var(--t3); padding: var(--sp-2) 0; }
.cw-month__day {
  min-height: var(--tap-min); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; border-radius: var(--r-sm); font-size: var(--fs-min);
}
.cw-month__day.is-outside { color: var(--t3); opacity: .5; }
/* Today is marked by a real boundary, not by a tone. */
.cw-month__day.is-today { border: 2px solid var(--brand); font-weight: 700; }
.cw-month__dots { display: flex; gap: 2px; }
.cw-month__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); display: block; }

/* ── HER CLIENTS ───────────────────────────────────────────────────────────
   Deliberately a mirror of .fc-people on the family's care team rather than a
   reuse of it. portal-family-care.css IS loaded on this page, so `.fc-person`
   would have worked and cost nothing, and that is the problem: a carer screen
   silently inheriting a stylesheet named for the family means restyling the
   family's team changes the carer's client list with no way to see it coming.
   Twenty lines is cheaper than that coupling. */
.cw-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--sp-3); }

/* The selector has to outweigh `.hds button:not(.ds-btn)`, which is (0,2,1),
   or every size written here is discarded, the tap floor included. Same shape
   as .fc-person next door, and the same reason. */
.hds .cw-person:not(.ds-btn) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--control-bd);
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.hds .cw-person:not(.ds-btn):hover { border-color: var(--brand); background: var(--brand-tint); }
.cw-person:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.cw-person__av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--t2);
  font-size: var(--fs-min);
  font-weight: 700;
}
.cw-person__name { font-size: var(--fs-body); font-weight: 700; color: var(--t1); }
.cw-person__what { font-size: var(--fs-min); font-weight: 400; color: var(--t3); }
.cw-people__more { margin-top: var(--sp-3); }

/* ── THE FULL CALENDAR, 1 Sep 2026 ─────────────────────────────────────────
   Schedule replaced the Week and Month tabs, and the month behind it had never
   drawn anything: it read a key the state has never produced, so every carer
   who tapped Month read "Nothing to show yet" whatever she had booked. */
.cw-month__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2);
}
.cw-month__title { margin: 0; text-align: center; flex: 1; }

/* The two steppers. Square, so they read as a pair either side of the month
   rather than as two sentences. The selector has to outweigh
   `.hds button:not(.ds-btn)` at (0,2,1) or the size here is discarded. */
.hds .cw-month__bar button.cw-month__step {
  flex: none;
  width: var(--tap-min);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* A DAY WITH WORK ON IT IS NOT ONLY A DOT. The dots are 5px and a person who
   does not read fine detail by eye gets nothing from them, so the day itself
   carries a tint and the cell has a label a screen reader can announce. */
.cw-month__day.has-work { background: var(--brand-tint); font-weight: 700; }
.cw-month__day.is-today.has-work { border-color: var(--brand); }

.cw-back { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* ── THE BAND, 1 Sep 2026 ──────────────────────────────────────────────────
   Carmen's greeting sat as plain text on the page ground while Anna's has been
   on an illustrated band since 30 Aug. The pictures were already loaded on the
   page and only the family's screen used them. Founder: "we would need the same
   illustration at the back where it's the good morning thing."

   MIRRORED RATHER THAN REUSED. portal-family-care.css IS loaded on this page,
   so `.fc-band` would have worked for nothing, and that is the problem: a carer
   screen inheriting a stylesheet named for the family means restyling the
   family's band silently restyles hers. Same call as .cw-person above it. */
.cw-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg, 16px);
  background: var(--band);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.cw-band__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.cw-band__body { position: relative; }

/* NIGHT IS A CONTRAST FIX, NOT A MOOD. The ink used on the bright band measures
   1.1 to 1 against the dark sky, which is invisible. Same numbers as the
   family's, which were measured rather than chosen by eye. */
.cw-band.is-night { background: #241C12; }

/* THE INK IS REDEFINED ON THE HEADING, NOT ON THE WHOLE BAND. A token set on a
   container reaches every descendant, including the tabs sitting on their own
   pale fill, which would then be cream on cream. */
.cw-band.is-night .cw-head {
  --t1: #FDFAF8;
  --t2: #E4DACC;
  --t-min: #F8B583;
}
.cw-band.is-night .cw-chip:not([aria-selected="true"]) {
  background: rgba(253, 250, 248, .92);
  border-color: transparent;
}
.cw-band .cw-chips { margin-top: var(--sp-4); }

/* ── THE PAIR, and a bar under it ─────────────────────────────────────────
   The founder's layout: a big box at the top, two boxes beside each other, a
   bar underneath. Anna's Today has had this shape since 31 Aug. */
.cw-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: var(--sp-4);
  /* STRETCH, so the pair is a pair. Two cards of the same standing ending at
     different heights read as an accident. */
  align-items: stretch;
  margin-bottom: var(--sp-4);
}
/* AND THE SECOND CARD MUST NOT BE PUSHED DOWN. `.ds-card + .ds-card` in
   hibant-ds.css is (0,2,0) and stacks cards vertically; in a grid that margin
   is not spacing between rows, it is an offset on one cell. Three deep so it
   wins outright rather than on which stylesheet loads last. */
.cw .cw-pair > .ds-card + .ds-card,
.cw .cw-pair > * + * { margin-top: 0; }

.cw-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.cw-bar > div { flex: 1; min-width: 16rem; }
.cw-bar p:last-of-type { margin-bottom: 0; }
.cw-hero .cw-row, .cw-hero .ds-card { margin-top: var(--sp-4); }

/* The small label above the headline. It carries the state, so the headline can
   do one job: who, and when. */
.cw-hero__kicker {
  font-size: var(--fs-min);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t2);
  margin: 0 0 var(--sp-2);
}

/* ── WHAT SHE HAS SENT, waiting on a family ────────────────────────────────
   Rows inside one card rather than a card each: this is a short list she scans
   and it must not out-shout the work she actually has. */
.cw-sent__row { border-top: 1px solid var(--bd); padding-top: var(--sp-3); margin-top: var(--sp-3); }
.cw-sent__row:first-of-type { border-top: 0; padding-top: 0; }
.cw-sent__who { font-size: var(--fs-body); color: var(--t2); }
.cw-sent__who strong { color: var(--t1); }
.cw-sent .ds-actions { margin-top: var(--sp-2); }