/* 21:00 Care and medicine. Bella's Home card with her condition and
   today's tracked insulin doses, the care reminder that floats over it
   with "Mark as Given", and the schedule's 14-day adherence strip. App
   pieces follow the visitor's appearance like the app; the hint and the
   Replay chip use the page tokens (the sky is night here).
   js/scenes/care.js drives it. Every button reaches 44 px in its hit area
   at 390 px. */

#stage-care { --stage-h: 640px; }
@media (min-width: 960px) { #stage-care { --stage-h: 600px; } }

#stage-care .x-care {
  position: relative;
  width: 100%; max-width: 600px;
  container: x-care / inline-size;
  display: grid; justify-items: center; gap: 16px;
}
#stage-care .x-care-comp {
  position: relative;
  width: 100%;
  display: grid;
  padding-top: 64px;
}

/* The Home card: Bella's card at the app's own width (362 pt). */
#stage-care .x-care-card { position: relative; z-index: 1; width: min(400px, 100%); }
#stage-care .x-care-card .screen { --pt: calc(100cqw / 362); }
#stage-care .x-care-cardin {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--pt));
  padding: calc(14 * var(--pt)) calc(14 * var(--pt)) calc(16 * var(--pt));
  border-radius: calc(34 * var(--pt));
  background: color-mix(in srgb, var(--scr-card-2) 62%, var(--scr-bg));
  border: 1px solid var(--scr-glass-line);
  box-shadow: 0 2px 6px rgba(10, 4, 40, 0.14), 0 30px 70px rgba(10, 4, 40, 0.4);
}

/* Health conditions: the diagnosis that shapes the card. */
#stage-care .x-care-k { margin: 0 0 calc(7 * var(--pt)) calc(2 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 600; color: var(--scr-ink-2); }
#stage-care .x-care-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: calc(6 * var(--pt));
  overflow: hidden; white-space: nowrap;
  -webkit-mask: linear-gradient(90deg, #000 78%, transparent);
  mask: linear-gradient(90deg, #000 78%, transparent);
}
#stage-care .x-care-chips li {
  flex: none;
  display: inline-flex; align-items: center; gap: calc(4 * var(--pt));
  height: calc(30 * var(--pt)); padding: 0 calc(12 * var(--pt));
  border-radius: var(--r-pill);
  background: var(--scr-fill);
  color: var(--scr-ink-2);
  font-size: calc(14 * var(--pt)); font-weight: 500;
}
#stage-care .x-care-chips li.on {
  padding-left: calc(8 * var(--pt));
  background: var(--scr-tint); color: #fff; font-weight: 600;
}
#stage-care .x-care-chips svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
#stage-care .x-care-chips svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Today's care (TodayDosesBlock). */
#stage-care .x-care-block {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(9 * var(--pt));
  padding: calc(11 * var(--pt)) calc(14 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: color-mix(in srgb, var(--scr-card) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--scr-sep) 70%, transparent);
}
#stage-care .x-care-h { display: flex; align-items: center; gap: calc(8 * var(--pt)); font-weight: 600; font-size: calc(15 * var(--pt)); }
#stage-care .x-care-h img, #stage-care .x-care-sym img { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); object-fit: contain; }
#stage-care .x-care-dose {
  display: flex; align-items: center; gap: calc(10 * var(--pt));
  min-height: calc(30 * var(--pt));
}
#stage-care .x-care-eve { position: relative; }
#stage-care .x-care-pulse {
  position: absolute; left: calc(-4.5 * var(--pt)); top: 50%;
  width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); margin-top: calc(-14 * var(--pt));
  border-radius: 50%; border: calc(2 * var(--pt)) solid var(--scr-ok);
  opacity: 0; pointer-events: none;
}
#stage-care .x-care-glyph { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); flex: none; overflow: visible; }
#stage-care .x-care-glyph .ring { fill: none; stroke: var(--scr-ink-2); stroke-width: 1.9; stroke-linecap: round; stroke-dasharray: 0 3.534; transform-box: fill-box; transform-origin: center; }
#stage-care .x-care-glyph .fill { transform-box: fill-box; transform-origin: center; }
#stage-care .x-care-glyph .fill circle { fill: var(--scr-ok); }
#stage-care .x-care-glyph .fill path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
#stage-care .x-care-dose[data-status="upcoming"] .fill { opacity: 0; }
#stage-care .x-care-dose[data-status="given"] .ring { opacity: 0; }
#stage-care .x-care-lbl { flex: 1; min-width: 0; display: grid; gap: calc(1 * var(--pt)); }
#stage-care .x-care-t { font-size: calc(15 * var(--pt)); font-variant-numeric: tabular-nums; white-space: nowrap; }
#stage-care .x-care-w { display: block; overflow: hidden; font-size: calc(12.5 * var(--pt)); color: var(--scr-ink-2); white-space: nowrap; }
#stage-care .x-care-dose[data-status="upcoming"] .x-care-w { display: none; }
#stage-care .x-care-mark {
  position: relative;
  flex: none;
  height: calc(30 * var(--pt)); padding: 0 calc(12 * var(--pt));
  border: 0; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--scr-tint) 16%, transparent);
  color: var(--scr-tint);
  font: 600 calc(14.5 * var(--pt))/1 var(--font-body);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.2s var(--ease-fade), transform 0.35s var(--spring-pop);
}
#stage-care .x-care-mark:hover { background: color-mix(in srgb, var(--scr-tint) 24%, transparent); }
#stage-care .x-care-mark:active { transform: scale(0.95); }
#stage-care .x-care-mark:focus-visible { outline-offset: 2px; border-radius: var(--r-pill); }
#stage-care .x-care-mark::before {      /* the 44 px hit area, centred */
  content: ""; position: absolute;
  top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px));
  left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px));
}
#stage-care .x-care-sep { height: 1px; background: var(--scr-sep); margin: calc(1 * var(--pt)) 0; }
#stage-care .x-care-sym { display: flex; align-items: center; gap: calc(8 * var(--pt)); font-weight: 600; font-size: calc(15 * var(--pt)); color: var(--scr-tint); }

/* The schedule's detail: Adherence, 14 days, two slots a day. */
#stage-care .x-care-detail {
  position: relative; z-index: 2;
  justify-self: end;
  width: min(312px, 86%);
  margin-top: -18px;
}
#stage-care .x-care-detail .screen { --pt: calc(100cqw / 312); }
#stage-care .x-care-detin {
  padding: calc(14 * var(--pt)) calc(16 * var(--pt)) calc(15 * var(--pt));
  border-radius: calc(26 * var(--pt));
  background: var(--scr-card);
  border: 1px solid var(--scr-glass-line);
  box-shadow: 0 2px 6px rgba(10, 4, 40, 0.14), 0 26px 60px rgba(10, 4, 40, 0.42);
}
#stage-care .x-care-dh { display: flex; align-items: center; gap: calc(10 * var(--pt)); margin-bottom: calc(12 * var(--pt)); }
#stage-care .x-care-dh img { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); object-fit: contain; }
#stage-care .x-care-dh b { display: block; font-weight: 650; font-size: calc(17 * var(--pt)); }
#stage-care .x-care-dh span { display: block; font-size: calc(13 * var(--pt)); color: var(--scr-ink-2); }
#stage-care .x-care-ak { margin: 0 0 calc(8 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 700; color: var(--scr-ink-2); }
#stage-care .x-care-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, calc(12 * var(--pt)));
  grid-auto-columns: calc(12 * var(--pt));
  gap: calc(3 * var(--pt));
}
#stage-care .x-care-grid i { border-radius: calc(3 * var(--pt)); background: var(--scr-fill); }
#stage-care .x-care-grid i[data-s="given"] { background: var(--scr-ok); }
#stage-care .x-care-grid i[data-s="late"] { background: var(--scr-amber); }
#stage-care .x-care-grid i[data-s="missed"] { background: var(--scr-red); }
#stage-care .x-care-grid i[data-s="up"] { background: #C7C7CC; }
@media (prefers-color-scheme: dark) { #stage-care .x-care-grid i[data-s="up"] { background: #48484A; } }
#stage-care .x-care-sum {
  margin: calc(9 * var(--pt)) 0 0;
  font-size: calc(12.5 * var(--pt)); color: var(--scr-ink-2);
  font-variant-numeric: tabular-nums;
}
#stage-care .x-care-sum.is-empty { visibility: hidden; }
#stage-care .x-care-n { display: inline-block; }

/* The care reminder, floating over the card's head. */
#stage-care .x-care-note {
  position: absolute; z-index: 3;
  top: 0; left: 50%;
  width: min(372px, calc(100% - 16px));
  margin-left: calc(min(372px, calc(100% - 16px)) / -2);
}
#stage-care .x-care-note .screen { --pt: calc(100cqw / 362); }
#stage-care .x-care-note .notif {
  background: rgba(246, 246, 250, 0.97);
  box-shadow: 0 calc(10 * var(--pt)) calc(34 * var(--pt)) rgba(10, 4, 40, 0.3);
}
#stage-care .x-care-note .notif-actions { margin-top: calc(10 * var(--pt)); }
#stage-care .x-care-note .notif-actions button { min-height: 44px; font-weight: 500; transition: background 0.2s var(--ease-fade); }
#stage-care .x-care-note .notif-actions button.is-pressed { background: rgba(255, 255, 255, 0.95); }
#stage-care .x-care-note .notif-actions button:focus-visible { outline-offset: -3px; border-radius: calc(14 * var(--pt)); }
@media (prefers-color-scheme: dark) {
  #stage-care .x-care-note .notif {
    background: rgba(56, 54, 66, 0.97);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 calc(10 * var(--pt)) calc(34 * var(--pt)) rgba(0, 0, 0, 0.5);
  }
  #stage-care .x-care-note .notif-actions button.is-pressed { background: rgba(255, 255, 255, 0.24); }
}

@container x-care (min-width: 520px) {
  #stage-care .x-care-comp { padding-top: 74px; }
  #stage-care .x-care-card { width: 392px; }
  #stage-care .x-care-detail { width: 300px; margin-top: -30px; }
  #stage-care .x-care-note { left: 0; width: 376px; margin-left: 52px; }
}

/* ---- Hint, Replay, the touch ---------------------------------------- */
#stage-care .x-care-foot { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; text-align: center; }
#stage-care .x-care-hint { font-size: 14px; color: var(--ink-2); }
#stage-care .x-care-replay {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 18px 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1);
  color: var(--ink); font: 650 14.5px/1 var(--font-body);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.4s var(--spring-pop);
}
#stage-care .x-care-replay:hover { transform: scale(1.04); }
#stage-care .x-care-replay:active { transform: scale(0.96); }
#stage-care .x-care-replay svg { width: 16px; height: 16px; }
#stage-care .x-care-touch {
  position: absolute; z-index: 10; left: 50%; top: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: rgba(170, 170, 182, 0.42);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.75), 0 2px 12px rgba(0, 0, 0, 0.18);
  opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #stage-care .x-care-mark, #stage-care .x-care-replay, #stage-care .x-care-note .notif-actions button { transition: none; }
}