/* shared/portal-care-notes.css
 *
 * ALL CARE NOTES. Rebuilt 31 Aug 2026 to the portal template.
 *
 * NOTHING HERE DEFINES A COLOUR. The screen it replaced carried forty-one inline
 * style attributes and painted with --tl, --tm, --br-d and --br-dp, which were
 * literals and therefore deaf to `prefers-contrast: more`. Every value below
 * comes from the design system, so the screen follows high contrast the way the
 * rest of the portal does. A module stylesheet may consume the tokens and may
 * never define one; test/the-notes-she-reads.test.js enforces it.
 *
 * The type, the ink, the cards and the buttons all come from hibant-ds.css and
 * none of it is restated here. What is left is layout and the two treatments
 * this screen genuinely needs: a note that has not been read, and a concern the
 * carer raised.
 */

/* NAMED .cnotes, NOT .cn, AND THAT IS NOT A STYLE PREFERENCE.
   hibant.css:244 already has `.cn{font-weight:700;color:var(--br-dp);font-size:17px}`,
   which is a CARER NAME on two admin screens. This container was called .cn for
   about an hour and inherited all three, so every paragraph inside the folded
   record rendered at 17px and bold, off the type scale entirely, while the card
   above it was correct. Found by reading the computed type off the rendered
   page, not from the source: the collision is invisible in both files.
   A two letter class in a stylesheet 115 pages load is a name collision waiting
   to happen. */
.cnotes { display: flex; flex-direction: column; gap: var(--sp-4); }

/* .ds-card + .ds-card adds its own 16px between stacked cards, which would
   double against the gap above. Cancelled here for the same reason .fc-pair
   cancels it inside a grid. */
.cnotes .ds-card + .ds-card { margin-top: 0; }

.cn-note > p + p { margin-top: var(--sp-3); }

/* ── THE LIST ────────────────────────────────────────────────────────────────
   A ROW IS FOR FINDING A VISIT, NOT READING ONE. The rows live inside one card
   rather than each being a card, because thirteen cards down a page is thirteen
   boxes and the point of the list is that it is short. They are separated by a
   rule, the way the days on the full calendar are. */
.cn-list { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }

/* .hds .cnotes .cn-row, AT (0,3,0), AND EVERY PART OF THAT IS LOAD BEARING.
   `.hds button:not(.ds-btn)` weighs (0,2,1), because :not() contributes its
   argument's specificity, and a bare `.cn-row` at (0,1,0) loses to it. The
   min-height written here would never have applied and the row would have missed
   the 48px tap floor. Caught by test/type-floor.test.js, which exists for this. */
.hds .cnotes .cn-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-3) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bd);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.hds .cnotes .cn-row:first-child { border-top: 0; }
.hds .cnotes .cn-row:hover { background: var(--surface); }
.hds .cnotes .cn-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.cn-row__main { flex: 1; min-width: 0; }
.cn-row__top { display: flex; align-items: center; gap: var(--sp-2); }
/* WHO CAME, THEN WHEN. Two lines, the template's row title and row sub, which is
   ONE secondary treatment rather than two that differ by a weight and an ink. */
.cn-row__who  { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--t1); }
.cn-row__when { display: block; font-size: var(--fs-min); color: var(--t3); }

/* UNREAD SAYS SO IN WORDS. Nothing on this platform encodes meaning in hue
   alone, so this is a word with a border, not a coloured dot. */
.cn-row__flag {
  flex: none;
  font-size: var(--fs-min);
  font-weight: 700;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
}
.cn-row__go { flex: none; color: var(--t3); }

/* The way back out of one note, above the card, the same shape as the full
   calendar's. */
.cn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: calc(var(--sp-3) * -1);
  font-weight: 700;
}
.cn-back svg { flex: none; }

/* A NOTE THAT HAS NOT BEEN READ CARRIES A LEFT RULE, NOT A COLOURED BORDER ALL
   THE WAY ROUND. The old one was `2px solid #F0C080` on all four sides, a
   literal the palette does not contain and the only thing on the card that said
   "new" other than a pill. One signal, on the reading edge, where an eye
   scanning down a list of days actually meets it. */
.cn-note.is-new { border-left: 4px solid var(--warn); }

/* THE STATUS LINE. .ds-card__status already sets the size, the weight, the
   letter spacing and --t3; these two only change the ink, and each is paired
   with the left rule or with the wording so nothing rests on hue alone. */
.cn-status--new  { color: var(--warn); }
.cn-status--open { color: var(--warn); }

/* WHAT THE CARER WROTE TO THE FAMILY DIRECTLY, as opposed to the digest. It was
   a pink gradient panel with a bold "A message from Carmen:" run into the front
   of the sentence. It is her voice, so it is indented and quiet rather than
   boxed and shouted. */
.cn-msg {
  border-left: 2px solid var(--bd-strong);
  padding-left: var(--sp-4);
}

/* SOMETHING THE CARER WANTED THE FAMILY TO KNOW. This was `background:#FEE` with
   `color:#C0392B`, neither of which is in the palette, and the red on that pink
   measured 4.9:1. It keeps prominence through position, a rule and a label. */
.cn-flag {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--warn);
  background: var(--surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.cn-flag b { display: block; margin-bottom: var(--sp-1); color: var(--t1); }
.cn-flag p { margin: 0; color: var(--t2); }   /* nested, so the card body rule does not reach it either */

/* THE FULL RECORD, folded away. A <summary> is a control, so it takes the tap
   target floor like every other control on the platform. */
.cn-more { margin-top: var(--sp-4); border-top: 1px solid var(--bd); }
.cn-more > summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--brand);
  cursor: pointer;
}
.cn-more > summary::-webkit-details-marker { display: none; }
.cn-more > summary::after {
  content: "";
  width: 10px; height: 10px;
  margin-left: var(--sp-2);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.cn-more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.cn-more__body > * + * { margin-top: var(--sp-3); }

/* THE BODY INK, RESTATED HERE FOR ONE REASON. The design system styles a card's
   body BY POSITION: `.ds-card > :where(p:not(.ds-meta))`. That is a DIRECT CHILD
   selector, so a paragraph nested inside <details> is not reached by it and
   falls back to the inherited --t1. Measured on the rendered page: the two
   paragraphs inside the folded record came out at --t1 while the two above it
   were --t2, which is the uniformity complaint that produced the template in the
   first place.
   Scoped to this block rather than fixed in hibant-ds.css, because widening that
   selector to `.ds-card :where(p)` would reach every nested paragraph in every
   card on the platform, and that is a change to make deliberately and measure,
   not one to make in passing. Noted for the founder. */
.cn-more__body p { color: var(--t2); }

/* THE OBSERVATIONS. Five pills in a row, each a rounded span with its own
   background and border, became a plain list. They are readings, not controls,
   and a pill that cannot be pressed is a button that does nothing. */
.cn-obs { list-style: none; margin: 0; padding: 0; }
.cn-obs li {
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--bd);
  font-size: var(--fs-min);
  color: var(--t2);
}
.cn-obs li:first-child { border-top: 0; }

/* THE ACTIONS. .ds-btn carries the sizes and the floor; this is only the row. */
.cn-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.cn-raised {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--brand);
  background: var(--surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

@media (max-width: 480px) {
  .cn-acts .ds-btn { width: 100%; }
}

/* ARRIVAL AND DEPARTURE. Two 80px photographs side by side with their captions
   above them in a 16px grey, which put the label and the picture in the wrong
   order for a screen reader. A figure with a figcaption says what they are. */
.cn-att { margin-top: var(--sp-3); }
.cn-shots { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
.cn-shot { margin: 0; }
.cn-shot img {
  display: block;
  width: 88px; height: 88px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--bd-strong);
  background: var(--surface);
  cursor: pointer;
}
.cn-shot figcaption { margin-top: var(--sp-1); font-size: var(--fs-min); color: var(--t3); }

/* Three rows, then a control. The founder's cap, 1 Sep 2026: "we're always
   capping things at three, so then after that it's more of a view all." */
.cn-list__all { margin-top: var(--sp-3); }