/* The child's card in the patient app (22 September 2026).
 *
 * The pregnancy card is pink and it is hers. This one is its sibling and it is the child's, so it
 * takes the hospital's blue rather than inventing a third colour — a soft sky head, a blue ring,
 * white underneath. Same shapes, same rhythm, same shadows as patient_app_premium.css; only the
 * hue changes, which is what makes the two read as one app rather than two.
 *
 * Kids' content is bright here by the owner's own rule. Nothing on this screen is dark except the
 * one card that has to be: "bring the child in straight away if…" sits on the ink surface,
 * because a danger sign that looks like the rest of the page is a danger sign nobody reads.
 *
 * Loaded after patient_app.css and patient_app_premium.css, and it only ever adds. A phone that
 * fails to fetch this file still gets a plain, working, readable card underneath.
 */

:root {
  --cd-blue:#0267C2;
  --cd-blue-deep:#064E92;
  --cd-sky-1:#E6F2FF;
  --cd-sky-2:#D6E9FD;
  --cd-sky-3:#C7E0FA;
  --cd-line:#D3E4F7;
}

/* ------------------------------------------------------------------ the hero card */
.card.cd-card { padding:0; overflow:hidden; border-color:var(--cd-line); }

.cd-head {
  margin:0; padding:20px 18px; position:relative;
  display:flex; align-items:center; gap:18px;
  background:linear-gradient(145deg, var(--cd-sky-1) 0%, var(--cd-sky-2) 45%, var(--cd-sky-3) 100%);
  border-bottom:1px solid var(--cd-line);
  /* The head clips its own decoration. Without this the child spills out of the blue band and
     onto the white below it, which reads as a mistake rather than as a watermark. */
  overflow:hidden;
}
/* The same soft highlight the pregnancy head carries, so the two sit together. */
.cd-head::after {
  content:""; position:absolute; right:-54px; top:-58px; width:170px; height:170px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 68%);
}
/* The child, bleeding off the right edge and well under the type. It is decoration and it is
   treated as such: low opacity, behind everything, cropped by the card, and gone entirely below
   360px where the ring and the numbers need every pixel. Nothing on the card depends on it
   loading — a phone that never fetches it sees the same words in the same places. */
.cd-head::before {
  content:""; position:absolute; right:-10px; bottom:-24px; width:124px; height:140px;
  background:url("/app/img/child-hero.png") right bottom / contain no-repeat;
  opacity:.26; pointer-events:none; z-index:0;
}
.cd-head > * { position:relative; z-index:1; }

.cd-ring-wrap { position:relative; flex:none; width:104px; height:104px; }
.cd-ring { width:104px; height:104px; transform:rotate(-90deg); }
.cd-ring circle { fill:none; stroke-width:9; stroke-linecap:round; }
.cd-ring .cd-track { stroke:rgba(255,255,255,.78); }
.cd-ring .cd-fill { stroke:var(--cd-blue); transition:stroke-dashoffset .7s var(--ease); }
/* Late is not a failure to shout about, but it must not look the same as up to date. */
.cd-ring.late .cd-fill { stroke:#C1243C; }

.cd-mid { position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1; }
.cd-mid b { display:block; font-size:34px; font-weight:800; letter-spacing:-.04em; color:var(--cd-blue-deep); }
.cd-mid small { display:block; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:#5D87B4; margin-top:3px; }

.cd-facts { min-width:0; display:flex; flex-direction:column; gap:3px; }
.cd-cap { font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#3E7CBB; }
.cd-facts b { font-size:19px; font-weight:800; letter-spacing:-.02em; color:#123C66; }
.cd-togo { font-size:13.5px; font-weight:700; color:#5C7E9E; }

/* ------------------------------------------------------------------ what is next */
.cd-next { padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px; }
.cd-next b { font-size:20px; font-weight:800; letter-spacing:-.02em; }
.cd-next .cd-red { color:var(--red); }
.cd-when { font-size:13.5px; font-weight:700; color:var(--muted); }
.cd-next.done b { font-size:15.5px; color:var(--green); }
.cd-next.done span { font-size:13.5px; font-weight:700; color:var(--muted); }

.cd-doses { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.cd-doses li {
  font-size:13px; font-weight:700; color:#12476F;
  background:#EDF5FD; border:1px solid var(--cd-line); border-radius:999px; padding:5px 11px;
}
.cd-next.late .cd-doses li { background:var(--red-soft); border-color:#F3D3D9; color:#8E1B2E; }

.cd-come { margin:12px 0 0; font-size:13.5px; font-weight:700; line-height:1.45; color:#8E1B2E;
  background:var(--red-soft); border-radius:var(--r-inner); padding:10px 12px; }

/* ------------------------------------------------------------------ given so far */
.cd-link {
  border:1px solid var(--cd-line); background:#fff; color:var(--cd-blue);
  font-size:12.5px; font-weight:800; border-radius:999px; padding:5px 12px; cursor:pointer;
}
.cd-given { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:11px; }
.cd-given li { display:flex; align-items:center; gap:12px; }
.cd-g-when { flex:none; min-width:78px; font-size:12.5px; font-weight:800; color:var(--cd-blue-deep);
  background:#EDF5FD; border-radius:9px; padding:6px 8px; text-align:center; }
.cd-g-what { min-width:0; display:flex; flex-direction:column; }
.cd-g-what b { font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
.cd-g-what small { font-size:11.5px; font-weight:700; color:var(--faint); }
.cd-more { margin-top:12px; width:100%; border:1px dashed var(--line); background:none;
  border-radius:var(--r-inner); padding:10px; font-size:13.5px; font-weight:800; color:var(--muted);
  cursor:pointer; }

/* ------------------------------------------------------------------ come now */
/* The one dark card in a bright app. It is dark on purpose: this is the card that has to be seen
   at two in the morning by somebody who is frightened and is not reading carefully. */
.card.cd-danger {
  background:linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 100%);
  border-color:transparent; box-shadow:var(--shadow-ink); color:#fff;
}
.cd-danger .row-head h2 { color:#fff; }
.cd-signs { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:12px; }
.cd-signs li { display:flex; flex-direction:column; gap:2px;
  border-left:3px solid #FF7A6B; padding-left:11px; }
.cd-signs li span { font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#93A6C4; }
.cd-signs li b { font-size:15px; font-weight:700; line-height:1.4; color:#fff; }
.cd-foot { margin:16px 0 0; padding-top:13px; border-top:1px solid var(--ink-line);
  font-size:12.5px; font-weight:700; color:#93A6C4; }

/* ------------------------------------------------------------------ after an injection */
.card.cd-ask { border-color:#F3DFC6; background:linear-gradient(160deg,#FFF9F0 0%, #FFF 52%); }
.cd-chips { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 12px; }
.cd-chip {
  border:1.5px solid var(--line); background:#fff; border-radius:999px;
  padding:9px 15px; font-size:14px; font-weight:700; color:var(--text); cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.cd-chip.on { border-color:var(--orange); background:var(--orange-soft); color:var(--orange-dark); }
.cd-other {
  width:100%; border:1px solid var(--line); border-radius:var(--r-inner); padding:11px 12px;
  font:inherit; font-size:15px; resize:none; background:#fff; color:var(--text);
}
.cd-acts { display:flex; gap:10px; margin-top:12px; }
.cd-acts .btn { flex:1; min-height:50px; }
.cd-acts .btn.ghost { background:#fff; color:var(--muted); border:1.5px solid var(--line); box-shadow:none; }

/* ------------------------------------------------------------------ narrow phones */
/* At 360px the ring and the facts stop fitting side by side; they stack rather than squeeze, and
   nothing on the page is allowed to grow a sideways scrollbar. */
@media (max-width:359px) {
  .cd-head { gap:14px; }
  .cd-head::before { display:none; }
  .cd-ring-wrap, .cd-ring { width:88px; height:88px; }
  .cd-mid b { font-size:28px; }
}