/* 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:600; letter-spacing:-.04em; color:var(--cd-blue-deep); }
.cd-mid small { display:block; font-size:11px; font-weight:600; 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:600; letter-spacing:.09em; text-transform:uppercase; color:#3E7CBB; }
.cd-facts b { font-size:19px; font-weight:600; letter-spacing:-.02em; color:#123C66; }
.cd-togo { font-size:13.5px; font-weight:500; 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:600; letter-spacing:-.02em; }
.cd-next .cd-red { color:var(--red); }
.cd-when { font-size:13.5px; font-weight:500; color:var(--muted); }
.cd-next.done b { font-size:15.5px; color:var(--green); }
.cd-next.done span { font-size:13.5px; font-weight:500; 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:500; 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:500; 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:600; 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:600; 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:500; letter-spacing:-.01em; }
.cd-g-what small { font-size:11.5px; font-weight:500; 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:600; 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:600; letter-spacing:.1em; text-transform:uppercase;
  color:#93A6C4; }
.cd-signs li b { font-size:15px; font-weight:500; 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:500; 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:500; 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; }
}

/* ================================================================== 4 Oct 2026
   Update (the doses from before the child came to us), "I will bring the child", and a given dose
   opened to its picture. Sections open and close by sliding: a one-row grid whose row goes from
   0fr to 1fr - "open and collapse when they touch ... smoothly, good animation". */
.kv-pic { flex:none; width:44px; height:44px; border-radius:14px; background:#fff; border:1px solid #E6EDF7; object-fit:contain; }
.kv-pic.big { width:60px; height:60px; border-radius:18px; }
.kv-pic.vial { width:118px; height:118px; border-radius:22px; }
.kv-pic.tiny { width:26px; height:26px; border-radius:8px; border:0; }
.kv-row { display:flex; align-items:center; gap:12px; }
.kv-lead { align-items:flex-start; }
.kv-lead .gm-lead { margin:0 0 4px; }
.gm-pill.kv-done { background:#1B7A46; }
.gm-btn.kv-cert { gap:6px; padding-left:8px; }
.gm-head .kv-pic.big { width:52px; height:52px; border-radius:16px; }
.gm-kid-danger .kv-pic { background:transparent; border:0; mix-blend-mode:multiply; }
.kv-note { margin:12px 0 0; padding:10px 13px; border-radius:16px; background:rgba(31,95,175,.07); color:var(--g-ink);
  font-size:14.5px; font-weight:500; line-height:1.45; }
.kv-list { margin:10px 0 0; font-size:14px; font-weight:600; line-height:1.5; color:var(--g-ink); }
.kv-lbl { display:block; margin:12px 0 5px; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--g-soft); }
.kv-date { width:100%; box-sizing:border-box; min-height:48px; padding:0 14px; border-radius:16px; border:1px solid var(--g-edge);
  background:#fff; color:var(--g-ink); font:inherit; font-size:16px; font-weight:500; }
.kv-days { margin:2px 0 0; }
.kv-coming .gm-head h2 { font-size:18px; }
.gm-kid + .kv-coming { margin-top:12px; }
.kv-elder { margin-top:12px; }
.kv-elder a.gm-btn { text-decoration:none; }
.kv-elder input[type=text].kv-date { font-size:16px; }

.kv-update .gm-lead { margin-bottom:10px; }
.kv-sec { border:1px solid var(--g-edge); border-radius:20px; margin-top:10px; background:rgba(255,255,255,.7); overflow:hidden;
  transition:box-shadow .25s ease, border-color .25s ease; }
.kv-sec.open { border-color:rgba(31,95,175,.28); box-shadow:0 10px 24px rgba(16,24,40,.07); }
.kv-sec-head { width:100%; display:flex; align-items:center; gap:10px; min-height:54px; padding:0 14px; border:0; background:none; font:inherit;
  color:var(--g-ink); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.kv-age { flex:none; width:44px; height:44px; border-radius:50%; object-fit:cover; background:#fff; border:2px solid #E6EDF7; }
.kv-sec-head b { flex:1; min-width:0; font-size:16.5px; font-weight:600; letter-spacing:-.01em; }
.kv-chev { flex:none; display:flex; color:var(--g-acc); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.kv-sec.open .kv-chev { transform:rotate(90deg); }
.kv-sec-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1); }
.kv-sec.open > .kv-sec-body, .kv-given.open > .kv-sec-body { grid-template-rows:1fr; }
.kv-sec-in { min-height:0; overflow:hidden; opacity:0; transform:translateY(-6px);
  transition:opacity .26s ease, transform .34s cubic-bezier(.2,.8,.2,1); }
.kv-sec.open > .kv-sec-body > .kv-sec-in, .kv-given.open > .kv-sec-body > .kv-sec-in { opacity:1; transform:none; }
.kv-sec .gm-rows { margin:0; padding:0 14px; }
.kv-sec .gm-rows li { flex-wrap:wrap; }
.kv-dose .gm-what { flex:1 1 120px; }
.kv-yn { display:flex; gap:8px; flex:1 1 100%; padding-left:56px; }
.kv-tick { flex:1; min-height:44px; border-radius:999px; border:1.5px solid var(--g-edge); background:#fff; color:var(--g-ink);
  font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease, transform .15s ease;
  -webkit-tap-highlight-color:transparent; }
.kv-tick:active { transform:scale(.97); }
.kv-tick.yes.on { background:#1B7A46; border-color:#1B7A46; color:#fff; }
.kv-tick.no.on { background:#44546A; border-color:#44546A; color:#fff; }
.kv-all { padding:2px 14px 14px; }
.kv-all .gm-btn.wide { margin-top:10px; }

.kv-givens li.kv-given { display:block; padding:0; }
.kv-given-head { width:100%; display:flex; align-items:center; gap:12px; padding:10px 0; border:0; background:none; font:inherit; color:inherit;
  text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.kv-detail { display:flex; align-items:center; gap:14px; padding:4px 0 14px; }
.kv-detail dl { flex:1; min-width:0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; font-size:14px; }
.kv-detail dt { color:var(--g-soft); font-weight:500; }
.kv-detail dd { margin:0; color:var(--g-ink); font-weight:600; overflow-wrap:anywhere; }
.kv-missing .gm-seen { margin-top:8px; }
@media (prefers-reduced-motion: reduce) {
  .kv-sec-body, .kv-sec-in, .kv-chev, .kv-tick, .kv-sec { transition:none !important; }
}

/* The chart as one line (4 Oct 2026): orange bars with the child at each age - static/age_hop.js
   draws and moves them, the same as the sister's page. Here: only what sits inside an age. */
.ag-in .gm-rows { margin:0; padding:4px 14px 0; }
.ag-in .gm-rows li { flex-wrap:wrap; }
.ag-in .kv-yn { padding-left:0; }
.ag-in .kv-detail { padding-left:0; }
.kv-more { flex:none; display:flex; color:var(--g-soft); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.kv-given.open .kv-more { transform:rotate(90deg); }
.kv-given-head .gm-what small { display:block; }
.kv-tick .kv-tickpic { width:22px; height:22px; vertical-align:-6px; margin-right:6px; border-radius:50%; background:#fff; object-fit:contain; }
.ag-in .kv-all { padding:2px 14px 14px; }
.ag-babe .kv-age { border:0; border-radius:0; background:none; }
.gm-pill.kv-soft { background:rgba(16,24,40,.07); color:var(--g-ink); }
.kv-update { margin-bottom:6px; }

/* ================================================================== 11 Oct 2026
   The chart has its own tab; Home keeps one card. And a dose ticked as given can carry what the
   vaccination card says - the day, the place, where on the body, the batch. */
.kv-home { width:100%; display:flex; align-items:center; gap:12px; margin:12px 0 0; text-align:left; font:inherit; color:inherit; cursor:pointer;
  border:1px solid rgba(238,90,14,.22); -webkit-tap-highlight-color:transparent; transition:transform .15s ease; }
.kv-home:active { transform:scale(.985); }
.kv-home .gm-what small { display:block; }
.kv-home .kv-home-line { font-size:14.5px; font-weight:600; color:var(--g-ink); line-height:1.4; }
.kv-home.late .kv-home-line { color:#A3123F; }
.kv-home .kv-more { color:var(--g-orange, #EE5A0E); }

.kv-add { flex:1 1 100%; min-height:44px; padding:0 4px; border:0; background:none; font:inherit; font-size:14.5px; font-weight:600;
  color:#B8430A; text-align:left; text-decoration:underline; text-underline-offset:3px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.kv-form { flex:1 1 100%; margin:2px 0 8px; padding:4px 12px 12px; border-radius:18px; background:#FFF7F0; border:1px solid rgba(238,90,14,.2); }
.kv-form .kv-lbl:first-child { margin-top:10px; }
.kv-sites { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.kv-site { display:flex; align-items:center; gap:8px; min-height:56px; padding:4px 8px; border-radius:16px; border:1.5px solid var(--g-edge);
  background:#fff; color:var(--g-ink); font:inherit; font-size:14.5px; font-weight:600; text-align:left; cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .15s ease; -webkit-tap-highlight-color:transparent; }
.kv-site:active { transform:scale(.97); }
.kv-site .kv-pic { width:44px; height:44px; border:0; }
.kv-site.on { border-color:#E2570F; box-shadow:0 0 0 3px rgba(226,87,15,.18); }
.kv-hint { margin:10px 0 0; font-size:13px; font-weight:500; line-height:1.45; color:var(--g-soft); }
.kv-form .gm-acts { margin-top:12px; }
.ag-txt small + small { opacity:.92; }

/* The middle of the bar, for a child: the vaccine picture in an orange ring with its word under it ("the word
   'Vaccines' under the round button", the same night). It is a tab like the others - open, it is the same pill -
   and a picture that does not come leaves the line icon in the bar's own ink. (:not(.leaf) only to be said more
   specifically than patient_app_glass.css, which loads after this sheet.) */
.tabs-in .tab.pic.vax:not(.leaf) { gap:1px; }
.tabs-in .tab.pic.vax:not(.leaf) img { width:32px; height:32px; padding:2px; box-sizing:border-box; border-radius:50%;
  border:2px solid var(--g-orange, #EE5A0E); background:#fff; object-fit:contain; mix-blend-mode:normal; box-shadow:0 4px 10px rgba(238,90,14,.2); }
/* open, it is no wider than "Reports" is when open, so the bar holds the same five on a 360px phone */
.tabs-in .tab.pic.vax.on:not(.leaf) { gap:4px; padding:0 11px 0 7px; }
@media (prefers-reduced-motion: reduce) { .kv-home, .kv-site { transition:none !important; } }