/* shared/portal-visit.css
 *
 * One visit: the plan she reads before, and the note she ticks as she goes.
 * Design system tokens only, nothing below --fs-min.
 *
 * THE TICK ROW IS THE MOST IMPORTANT CONTROL IN THE PRODUCT FOR CARMEN, and it
 * is used one handed, standing up, often in a hallway, sometimes in a coat. It
 * is a full width row at --tap-primary with the box on the left, not a small
 * checkbox with a label beside it. The whole row is the target.
 */

.vs { padding: var(--sp-5) var(--sp-4) var(--sp-7); max-width: var(--portal-measure); margin: 0 auto; }
.vs .vs-h { font-size: var(--fs-lead); margin: var(--sp-6) 0 var(--sp-3); }

/* ── Who, when, and the shape of the note ─────────────────────────────────── */

.vs-head { margin-bottom: var(--sp-4); }
.vs .vs-head__who { font-size: var(--fs-h2); line-height: var(--lh-head); }
.vs-head__when { font-size: var(--fs-min); color: var(--t3); margin-top: 2px; }
.hds .vs-shape:not(.ds-btn) {
  margin-top: var(--sp-3); min-height: var(--tap-min);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: var(--surface); border: 2px solid var(--bd-strong);
  font-family: var(--font-body); font-size: var(--fs-min); font-weight: 700; color: var(--t1);
  cursor: pointer;
}
.vs-shape__change { font-weight: 400; color: var(--brand); text-decoration: underline; }
.vs-att { margin-bottom: var(--sp-4); }

/* ── The plan half ────────────────────────────────────────────────────────── */

.vs-goal { margin-bottom: var(--sp-3); }
.vs .vs-goal__k { font-size: var(--fs-min); font-weight: 700; color: var(--t2); text-transform: none; }
.vs-goal__v { font-size: var(--fs-lead); line-height: var(--lh-head); margin-top: var(--sp-1); }

.vs-pref { margin-bottom: var(--sp-3); }
.vs-pref__who { font-weight: 700; }
.vs-pref__v { color: var(--t2); margin-top: 2px; }

.hds .vs-planlink:not(.ds-btn) {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 0 var(--sp-3); width: 100%; text-align: left; cursor: pointer;
  min-height: var(--tap-primary); padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--t1);
}
.vs-planlink__t { font-weight: 700; }
.vs-planlink__s { grid-column: 1; font-size: var(--fs-min); color: var(--t3); }
/* grid-column: 2 IS LOAD BEARING. Without it the chevron auto placed into
   column one, row one, and shoved the title into the narrow auto column: the
   arrow sat on the left and "Medicines, allergies, and everything the family
   has written down" wrapped into a five line ribbon. Seen in a browser, not in
   the markup, where it reads perfectly well. */
.vs-planlink__go { grid-column: 2; grid-row: 1 / 3; color: var(--t3); font-size: var(--fs-lead); line-height: 1; }

/* ── The how. Tick as you go. ─────────────────────────────────────────────── */

.vs-steps { list-style: none; }
.vs-step + .vs-step { margin-top: var(--sp-2); }
.hds .vs-step__btn:not(.ds-btn) {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%; text-align: left;
  min-height: var(--tap-primary);
  padding: var(--sp-3) var(--sp-4);
  /* --bd-strong, NOT --bd. This row is the whole control and that border is
     the only thing separating it from the card behind it. --bd is 1.4:1 and is
     decorative; a tick box a carer cannot find the edge of on a doorstep in
     the rain is not a tick box. Caught 24 Aug 2026 by the first guard ever to
     read a module stylesheet. */
  background: var(--card); border: 2px solid var(--bd-strong); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--t1);
  cursor: pointer;
}
.vs-step__box {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: var(--r-sm);
  border: 2px solid var(--bd-strong); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-body); line-height: 1; color: var(--on-brand);
}
/* Ticked reads as done at a glance, and NOT by colour alone: the box fills, the
 * tick appears, and the label takes a strikethrough. A carer checking her work
 * in a dim hallway should not have to compare two greens. */
.vs-step__btn[aria-checked="true"] { border-color: var(--brand); }
.vs-step__btn[aria-checked="true"] .vs-step__box { background: var(--brand); border-color: var(--brand); }
.vs-step__btn[aria-checked="true"] .vs-step__label { text-decoration: line-through; color: var(--t2); }
.vs-step__label { flex: 1; min-width: 0; }

/* ── Her words, and saving ────────────────────────────────────────────────── */

.vs-save { margin-top: var(--sp-4); }

/* ── The parts of the day this visit falls in ─────────────────────────────── */
/*
 * A heading appears only when a visit falls in MORE than one part. An ordinary
 * nine to twelve visit is a morning and reads as one plain list, exactly as it
 * did before parts existed. A nine to two visit gets Morning and Afternoon, so
 * the lunch Carmen could not have done is explained rather than silently absent.
 */
/* TWO CLASSES, FOR THE SAME REASON AS .pl .pl-h, AND I MADE THE MISTAKE TWICE
   IN ONE SESSION. This is an h3, `.hds h3` is (0,1,1), a lone `.vs-part` is
   (0,1,0), so the rule lost and "Morning" rendered at 24px in the display face
   above a 16px list. A guard for this shape is now in
   test/design-system.test.js, because reading the file is evidently not
   enough. */
.vs .vs-part {
  font-size: var(--fs-min); font-weight: 700; color: var(--t2);
  font-family: var(--font-body); letter-spacing: 0.02em;
  margin: var(--sp-5) 0 var(--sp-2);
}
.vs .vs-part:first-of-type { margin-top: var(--sp-3); }
.vs-none { font-size: var(--fs-min); color: var(--t2); margin-bottom: var(--sp-3); }

/* Medicines are READ ONLY here. The family set them and Carmen records what she
   did with them elsewhere; a control on this screen that saved nothing would be
   worse than no control. */
/* list-style: none, or the marker renders OUTSIDE the card and the medicine
   sits behind a stray bullet. A flex container does not reliably suppress it. */
.vs-meds { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.vs-med {
  padding: var(--sp-3); border: 1px solid var(--bd);
  border-left: 4px solid var(--bd-strong); border-radius: var(--r-sm);
  background: var(--surface);
}
.vs-med__name { display: block; font-weight: 700; color: var(--t1); }
.vs-med__why { display: block; font-size: var(--fs-min); color: var(--t2); margin-top: 2px; }

/* THE DOSE, THE TIME AND THE FAMILY'S OWN INSTRUCTIONS, all new on 28 Aug 2026.
   Until then this screen showed a name and a purpose, and the dose, the time,
   the instructions Anna typed and the as-needed marker never reached Carmen at
   all. */
.vs-med__dose { font-weight: 400; color: var(--t2); }
.vs-med__at { float: right; font-size: var(--fs-min); font-weight: 700; color: var(--t2); }
.vs-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;
}
/* Her instructions read as an instruction, not as small print. This is the line
   Anna believed she had already given the carer. */
.vs-med__how {
  display: block; font-size: var(--fs-min); color: var(--t1);
  margin-top: 4px; padding-left: var(--sp-2); border-left: 2px solid var(--bd-strong);
}
.vs-med__src { display: block; margin-top: 4px; }

/* ── Something she did that nobody wrote down ─────────────────────────────── */
/*
 * Without this the plan can only ever FENCE the visit, and Anna's screen makes
 * a promise about "things she chose to do herself" that nothing could keep.
 */
.vs-own { margin-top: var(--sp-3); }
.vs-ownbox {
  margin-top: var(--sp-3); padding: var(--sp-4);
  border: 1px solid var(--bd-strong); border-radius: var(--r-md); background: var(--surface);
}
.vs-step__own {
  display: block; font-size: var(--fs-min); color: var(--t2); margin-top: 2px; font-weight: 400;
}

/* A closed note is a record, not a form. The row keeps the shape of the tick
   list so it still reads as what happened, and stops being a control. */
.vs-step__btn.is-readonly {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%;
  min-height: var(--tap-primary); padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--bd-strong); border-radius: var(--r-md);
  font-size: var(--fs-body); color: var(--t1); cursor: default;
}
.vs-closed {
  margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bd-strong); border-left-width: 4px; border-radius: var(--r-md);
  background: var(--surface);
}

/* ── THE OVERNIGHT ─────────────────────────────────────────────────────────
   New 28 Aug 2026. A waking night is not a long visit: a settled time, a
   look-in at the family's chosen interval, the things that happened between,
   and a handover in the morning. */
.vs-settled { display: block; }
.vs-settled__t { font-weight: 700; color: var(--t1); margin: 0 0 4px; }
.vs-settled__n { color: var(--t2); margin: 0 0 var(--sp-2); }
/* The check due now is the one thing on the screen she must not miss at four
   in the morning, so it is the only card that carries an accent edge. */
.vs-check { border-left: 3px solid var(--brand); }
.vs-check__t { font-weight: 700; color: var(--t1); margin: 0 0 2px; }
.vs-check__n { margin-top: var(--sp-2); }
.vs-check__last, .vs-check__fold { margin: var(--sp-2) 0 0; }
.vs-finds { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.vs-find, .vs-out {
  border: 1px solid var(--bd-strong); background: var(--surface); color: var(--t1);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: var(--fs-min); cursor: pointer;
}
.vs-find.is-on, .vs-out.is-on { border-color: var(--t1); background: var(--t1); color: var(--surface); font-weight: 700; }
.vs-med__did { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.vs-med__did.is-readonly { display: block; font-size: var(--fs-min); color: var(--t2); }
.vs-med__rlbl { display: block; margin-top: var(--sp-2); }
.vs-events { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--sp-2); }
.vs-event { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: var(--sp-2); align-items: baseline; padding: var(--sp-1) 0; }
.vs-event__at { font-weight: 700; color: var(--t2); font-size: var(--fs-min); }
/* 21px WIDE UNTIL 30 Aug 2026, measured on the rendered preview. It inherited a
   48px height from the row and had `padding: 0 4px` and nothing else, so the
   removable thing next to it was easy to hit and the remove itself was not. The
   locked spec is 48px minimum for a standard control, reasoned for a person with
   tremor holding a phone one handed. */
.vs-event__rm { border: none; background: none; color: var(--t2); font-size: var(--fs-lead);
  line-height: 1; cursor: pointer; padding: 0;
  min-width: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center; }
/* NO min-height HERE ON PURPOSE, and a guard in test/design-system.test.js said
   so the moment it was written. `.hds button:not(.ds-btn)` already sets it at
   (0,2,1); this selector is (0,1,0) and loses, so a min-height written here is a
   dead line that reads like a promise. WIDTH is what was missing: 21px, because
   nothing sets a width and the glyph decided. */

/* ── THE LIVE IN DAY: one note in four blocks ──────────────────────────────
   New 28 Aug 2026, shape four. The block she is in is open, the ones behind
   fold to a tick and a line, the ones ahead read as a preview. */
.vs-block { display: block; margin-bottom: var(--sp-3); }
.vs-block__h { font-weight: 700; color: var(--t1); margin: 0 0 var(--sp-2); }
.vs-block__tick { color: var(--brand); font-weight: 700; }
/* The open block is the only one carrying an accent edge, so a glance finds
   where the day has got to. */
.vs-block.is-now { border-left: 3px solid var(--brand); }
/* A folded block reads as a record rather than a control. */
.vs-block.is-done { opacity: .8; }
/* A block she has not reached is visibly not hers to fill in yet. */
.vs-block.is-later { border-style: dashed; }

/* ── THE PERSON, THE FOOD AND WHO TO RING ──────────────────────────────────
   New 28 Aug 2026, completing the standard visit. Every column behind these
   has existed since the beginning and none of them had ever reached a carer. */
.vs-cue { display: block; }
.vs-cue__k {
  font-size: var(--fs-min); font-weight: 700; color: var(--t2);
  text-transform: uppercase; letter-spacing: .5px; margin: 0 0 2px;
}
.vs-cue__k + .vs-cue__v { margin: 0 0 var(--sp-3); }
.vs-cue__v { color: var(--t1); margin: 0; }

/* THE ALLERGY LINE IS NOT SMALL PRINT. An allergy read after the fact is an
   allergy read too late, so it carries the alert colours the design system
   already defines rather than sitting in grey. */
.vs-allergy {
  background: var(--alert-bg); color: var(--alert);
  border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-3); font-weight: 700;
}
.vs-allergy__k { text-transform: uppercase; font-size: var(--fs-min); letter-spacing: .5px; }

.vs-intake { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--sp-2); }
.vs-take { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: var(--sp-2); align-items: baseline; padding: var(--sp-1) 0; }
.vs-take__at { font-weight: 700; color: var(--t2); font-size: var(--fs-min); }

/* A phone number at three in the morning is a tap target, not a line of text. */
.vs-who { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.vs-who__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.vs-who__r { font-weight: 700; color: var(--t2); font-size: var(--fs-min); text-transform: uppercase; letter-spacing: .5px; }
.vs-who__n { color: var(--t1); }
.vs-who__p {
  color: var(--brand); font-weight: 700; text-decoration: none;
  min-height: var(--tap-min); display: inline-flex; align-items: center;
}