/* ---------- BPMonitor, rebuilt (Clario, Part 3) ----------
   A measurement in the patient app as a small prototype, rebuilt from
   screenshots: a phone on the page's tint, with the steps beside it.
   The screen is laid out at the app's own size, 392 × 870 dp with one CSS
   pixel per dp, and scaled to fit with --k (js/bpmonitor.js sets it; the
   default fits a 300px screen). Colors, type and spacing are measured from
   the screenshots. */

.bpmonitor {
  --k: .7653;
  --bezel: 10px;
  --pad-x: clamp(20px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 340px) 320px;
  justify-content: center;
  align-items: center;
  gap: clamp(32px, 7vw, 96px);
  row-gap: 28px;
  padding: clamp(28px, 5vw, 56px) var(--pad-x);
  border-radius: var(--radius);
  background: var(--tint);
}

/* A notice across the top: this is a representation, not the app itself */
.hb-notice {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: #ffffffb3;
  font: 500 .8125rem/1.5 var(--sans);
  letter-spacing: .02em;
  text-align: center;
  color: var(--tint-ink);
}

/* ---------- The steps, beside the phone ---------- */

.hb-side { display: grid; justify-items: start; gap: 18px; min-width: 0; }
.bpmonitor .hb-steps { position: relative; width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: hb-step; }
.bpmonitor .hb-steps li { margin: 0; counter-increment: hb-step; }
.hb-steps button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 6px;
  width: 100%;
  padding: 9px 14px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.hb-steps button::before { content: counter(hb-step, decimal-leading-zero); grid-row: span 2; padding-top: 3px; font: 400 .8125rem/1.6 var(--sans); font-variant-numeric: tabular-nums; color: var(--accent); }
.hb-steps b { font: 500 1.0625rem/1.4 var(--serif); }
.hb-steps span { font: 400 .8125rem/1.5 var(--sans); color: var(--ink-2); }
.hb-steps button:hover { background: #ffffff80; }
.hb-steps button[aria-current] { background: #fff; box-shadow: 0 1px 3px #0000000f; }

.hb-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  padding: 8px 15px 8px 13px;
  border: 1px solid #0000001f;
  border-radius: 999px;
  background: #ffffff80;
  font: 400 .8125rem/1.2 var(--sans);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s;
}
.hb-play:hover { background: #fff; }
.hb-play svg { width: 12px; height: 12px; fill: currentColor; }
.hb-play .i-play, .hb-play.paused .i-pause { display: none; }
.hb-play.paused .i-play { display: block; }
.bpmonitor:not(.is-ready) .hb-play { display: none; }

/* ---------- The phone ---------- */

.hb-device { width: 100%; max-width: 320px; justify-self: center; }
.hb-phone {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  padding: var(--bezel);
  border-radius: calc(26px * var(--k) + var(--bezel));
  background: #1d1c21;
  box-shadow: inset 0 0 0 1px #ffffff17, 0 40px 60px -30px #2c253133, 0 18px 36px -18px #2c253120;
}
/* The power key */
.hb-phone::before { content: ""; position: absolute; top: 26%; right: -2px; width: 3px; height: 9%; border-radius: 0 3px 3px 0; background: #2c2b31; }
.hb-screen {
  position: relative;
  width: calc(392px * var(--k));
  height: calc(870px * var(--k));
  overflow: hidden;
  border-radius: calc(26px * var(--k));
  clip-path: inset(0 round calc(26px * var(--k)));
  background: #fff;
}
/* The front camera */
.hb-screen::after { content: ""; position: absolute; z-index: 3; top: calc(13px * var(--k)); left: 50%; width: calc(12px * var(--k)); height: calc(12px * var(--k)); border-radius: 50%; background: #1d1c21; transform: translateX(-50%); }

.hb-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 392px;
  height: 870px;
  transform: scale(var(--k));
  transform-origin: 0 0;
  font: 400 20px/24px var(--sans);
  letter-spacing: .04em;
  color: #11181c;
  text-align: left;
}
.hb-canvas p { margin: 0; }
.hb-canvas b { font-weight: 700; }
.hb-canvas img { max-width: none; height: auto; }
.bpmonitor .hb-canvas ol { padding: 0; list-style: none; }
.bpmonitor .hb-canvas li { margin: 0; }

/* Buttons in the app, with a ripple when they're pressed */
:where(.hb-canvas) button { position: relative; overflow: hidden; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(.hb-canvas) button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; }
:where(.hb-canvas) button.is-pressed::after { animation: hb-ripple .55s var(--ease); }
@keyframes hb-ripple { from { opacity: .3; transform: scale(.3); } to { opacity: 0; transform: scale(17); } }
.hb-canvas :focus-visible { outline: 2.5px solid #11181c; outline-offset: 3px; }
.hb-canvas button:disabled { cursor: default; }
@media (hover: hover) {
  .hb-measure:hover, .hb-next:not(:disabled):hover { background: #4a4053; }
  .hb-back:hover { background: #f8f9fa; }
  .hb-x:hover { background: #f1f3f5; }
}

/* ---------- Home ---------- */

.hb-home { position: absolute; inset: 0 0 48px; background: linear-gradient(#eeebf4 215px, #fff 305px); letter-spacing: 0; }
.hb-lead { position: absolute; top: 84px; left: 32px; width: 250px; font-size: 21px; font-weight: 700; }
.hb-measure {
  position: absolute;
  top: 176px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 26px;
  width: 328px;
  height: 99px;
  padding-left: 36px;
  border-radius: 8px;
  background: #5a4f63;
  box-shadow: 0 8px 18px -4px #11181c1f;
  color: #fff;
}
.hb-measure svg { flex: none; width: 34px; height: 34px; }
.hb-measure > span { display: grid; gap: 4px; }
.hb-measure small { font-size: 18.5px; }
.hb-measure b { font-size: 21px; line-height: 26px; }
.hb-rule { position: absolute; top: 330px; left: 0; right: 0; height: 1px; background: #dfe3e6; }
.hb-upcoming { position: absolute; top: 359px; left: 32px; right: 32px; }
.hb-upcoming > b { display: block; font-size: 21px; font-weight: 600; line-height: 26px; }
.hb-upcoming .hb-day { margin-top: 23px; font-size: 18.5px; font-weight: 700; line-height: 22px; }
.hb-slot { height: 60px; margin-top: 6px; padding: 7.5px 16px 0; border-radius: 8px; background: #fff; box-shadow: 0 14px 28px -14px #2c253126, 0 1px 2px #2c25310f; }
.hb-slot > span { display: block; font-size: 21px; }
.hb-slot small { display: flex; align-items: center; gap: 6px; margin: 2px 0 0 -3px; font-size: 14.7px; line-height: 20px; color: #687076; }
.hb-slot svg { width: 22px; height: 22px; }

/* Android's navigation bar, under every screen */
.hb-sysnav { position: absolute; right: 0; bottom: 0; left: 0; height: 48px; background: #fff; }
.hb-sysnav svg { width: 392px; height: 48px; }

/* ---------- The measurement: title, heartbeat line, screens, buttons ---------- */

.hb-flow { position: absolute; inset: 0 0 48px; background: #fff; box-shadow: 0 -10px 28px #11181c10; visibility: hidden; }
.bpmonitor.in-flow .hb-flow { visibility: visible; }
.hb-head { position: absolute; top: 0; right: 0; left: 0; display: flex; align-items: center; height: 108px; padding-left: 16px; }
.hb-title { flex: 1; min-width: 0; font-size: 28px; line-height: 33.6px; }
.hb-x { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin-right: 12px; border-radius: 50%; }
.hb-x svg { width: 24px; height: 24px; }

/* The heartbeat line under the title grows by one beat with each step of
   the preparation, drawn like a trace on a monitor with the dot as its pen. */
.hb-ecg { --w: 0px; --draw: 0ms; position: absolute; top: 88px; left: 0; width: 392px; height: 30px; transition: opacity .3s, transform .7s cubic-bezier(.65, 0, .35, 1); }
.hb-ecg.off { opacity: 0; }
.hb-ecg.pushed { transform: translateX(-100%); }
.hb-ecg.snap, .hb-ecg.snap * { transition: none !important; }
.hb-ecg-trace { width: var(--w); height: 30px; overflow: hidden; transition: width var(--draw) linear; }
.hb-ecg svg { width: 392px; max-width: none; height: 30px; }
.hb-ecg i { position: absolute; top: 12.75px; left: 0; width: 4px; height: 4px; background: #cdc3da; transform: translateX(calc(var(--w) + 2px)); transition: transform var(--draw) linear; }

/* A screen shows only while the flow does: visibility: visible on a child
   would otherwise override the hidden flow around it. */
.hb-body { position: absolute; top: 108px; right: 0; bottom: 0; left: 0; padding: 0 16px; visibility: hidden; }
.bpmonitor.in-flow .hb-body.on { visibility: visible; }
.hb-wide { display: block; width: 392px; margin-inline: -16px; }
.hb-strong { font-weight: 700; }

/* Before you start: a bullet list with room between the items, and the
   lines still to come drawn as placeholders */
.bpmonitor .hb-bullets { margin: 24px 0 0; padding: 0; list-style: none; }
.bpmonitor .hb-bullets > li { position: relative; padding-left: 30px; }
.bpmonitor .hb-bullets > li + li { margin-top: 26px; }
.hb-bullets > li::before { content: ""; position: absolute; top: 8px; left: 6px; width: 9px; height: 9px; border-radius: 50%; background: #5a4f63; }
.hb-bullets .hb-skel::before { background: #e6e2ea; }
.hb-bullets .hb-skel i { display: block; width: 88%; height: 14px; margin-top: 5px; border-radius: 7px; background: #e6e2ea; }
.hb-bullets .hb-skel i + i { width: 58%; margin-top: 12px; }
/* The low battery flashes, as it does on the monitor */
.hb-batteries .low { animation: hb-flash 1.1s steps(1) infinite; }
@keyframes hb-flash { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .hb-batteries .low { animation: none; opacity: .5; } }

/* Getting ready: lists split by hairlines */
.bpmonitor .hb-list > * { padding: 16px 0 15px; }
.bpmonitor .hb-list > * + *, .bpmonitor .hb-num > li + li { border-top: 1px solid #d7dbdf; }
.hb-batteries { display: flex; align-items: center; height: 24px; margin: 14px 0 0; }
.hb-batteries svg { flex: none; }
.hb-batteries .ok { width: 28px; height: 20px; margin-right: 8px; }
.hb-batteries .full, .hb-batteries .low { width: 36px; height: 20px; }
.hb-batteries .bad { width: 20px; height: 20px; margin: 0 12px 0 44px; }
.hb-ready2 .hb-wide { margin-top: 34px; }
.hb-ready2 .hb-list { margin-top: 6px; }
.hb-go { display: inline-block; width: 21px; height: 18px; margin: 0 1px; vertical-align: -2px; color: #5a4f63; }

/* Applying the cuff, sitting correctly: numbered steps */
.hb-num { margin: 0; counter-reset: hb-n; }
.bpmonitor .hb-num > li { position: relative; padding: 24px 0 23px 56px; counter-increment: hb-n; }
.hb-num > li::before { content: counter(hb-n); position: absolute; top: 16px; left: 0; width: 40px; height: 40px; border-radius: 50%; background: #f1eef5; font-size: 20px; font-weight: 600; line-height: 40px; letter-spacing: 0; text-align: center; color: #5a4f63; }
.hb-cuff .hb-wide { margin-top: 12px; }
.hb-cuff .hb-num { margin-top: -6px; }
.hb-sit .hb-wide { margin-top: 13px; }
.hb-sit .hb-num { margin-top: 2px; }

/* Rest: the line is pushed aside, the instructions fade in, then the
   calming video starts with its countdown. */
.hb-rest .hb-wide { height: 392px; margin-top: 14px; opacity: 0; transition: opacity .6s var(--ease); }
.hb-timer { height: 0; overflow: hidden; font-size: 28px; line-height: 36px; letter-spacing: .02em; text-align: center; color: #2c2531; opacity: 0; transition: height .45s var(--ease), opacity .3s; }
.hb-rest-text { margin-top: 32px; opacity: 0; transition: opacity .45s var(--ease); }
.hb-rest-text p + p { margin-top: 12px; }
.hb-rest .hb-strong { opacity: 0; transition: opacity .4s .25s; }
.hb-rest[data-phase="text"] .hb-rest-text,
.hb-rest[data-phase="video"] .hb-rest-text,
.hb-rest[data-phase="video"] .hb-wide,
.hb-rest[data-phase="video"] .hb-strong { opacity: 1; }
.hb-rest[data-phase="video"] .hb-timer { height: 36px; opacity: 1; transition: height .45s var(--ease), opacity .3s .2s; }

/* Take your blood pressure: the phone waits for the readings */
.hb-measuring { padding-top: 14px; }
.hb-measuring p + p { margin-top: 16px; }
.hb-measuring .hb-wide { margin-top: 33px; }
/* Waiting for the reading: three dots, pulsing in turn */
.hb-dots { display: flex; justify-content: center; gap: 14px; height: 16px; margin-top: 36px; }
.hb-dots i { width: 16px; height: 16px; border-radius: 50%; background: #5a4f63; animation: hb-dot 1.2s ease-in-out infinite; }
.hb-dots i:nth-child(2) { animation-delay: .2s; }
.hb-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes hb-dot { 0%, 60%, 100% { opacity: .25; transform: scale(.75); } 30% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hb-dots i { animation: none; opacity: .6; } }
.hb-measuring .hb-dots + p { margin-top: 40px; }
.hb-measuring .hb-strong { margin-top: 32px; }

/* Your reading: the two values as tiles, side by side */
.hb-results { padding-top: 13px; }
.hb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.hb-tile { display: grid; justify-items: start; padding: 20px 18px 18px; border-radius: 14px; background: #f5f3f9; letter-spacing: .02em; }
.hb-tile svg { width: 32px; height: 32px; margin-bottom: 18px; fill: none; stroke: #5a4f63; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hb-tile small { font-size: 15px; line-height: 20px; color: #687076; }
.hb-tile b { margin-top: 6px; font-size: 34px; line-height: 40px; font-weight: 600; white-space: nowrap; }
.hb-tile i { margin: 0 4px; font-style: normal; font-weight: 400; color: #a7abad; }
.hb-tile span { margin-top: 2px; font-size: 16px; line-height: 20px; color: #687076; }
.hb-results .hb-press { margin-top: 44px; }
.hb-check { display: inline-block; width: 21px; height: 15px; margin: 0 5px; vertical-align: -1px; }

/* The buttons at the bottom: one or two, disabled while resting, gone
   while the app works on its own */
.hb-foot { position: absolute; top: 746px; right: 16px; left: 16px; height: 60px; transition: opacity .3s, visibility 0s; }
.hb-foot[data-mode="none"] { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.hb-back, .hb-next { position: absolute; top: 0; display: grid; place-items: center; height: 60px; border-radius: 6px; box-shadow: 0 2px 3px #11181c0f, 0 5px 12px -3px #11181c14; }
.hb-back { left: 0; width: 177px; border: 1px solid #d7dbdf; background: #fff; color: #11181c; transition: opacity .25s, visibility 0s; }
.hb-next { right: 0; width: 177px; background: #5a4f63; color: #fff; transition: width .4s var(--ease), background-color .3s, color .3s; }
.hb-foot[data-mode="solo"] .hb-back, .hb-foot[data-mode="done"] .hb-back { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.hb-foot[data-mode="solo"] .hb-next, .hb-foot[data-mode="done"] .hb-next { width: 360px; }
.hb-next:disabled { background: #a7abad; color: #e0e3e6; }
.hb-back svg, .hb-next svg { grid-area: 1 / 1; width: 21px; height: 18px; transition: opacity .2s, transform .3s var(--ease); }
.hb-next .i-done { height: 15px; opacity: 0; transform: scale(.5); }
.hb-foot[data-mode="done"] .i-done { opacity: 1; transform: none; }
.hb-foot[data-mode="done"] .i-next { opacity: 0; transform: scale(.5); }

/* ---------- Smaller screens: the phone first, the steps as a row ---------- */

@media (max-width: 400px) { .bpmonitor { --k: .66; } }
@media (max-width: 760px) {
  .bpmonitor { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hb-side { order: 2; justify-items: center; }
  .bpmonitor .hb-steps { display: flex; gap: 6px; width: auto; max-width: none; margin: 0 calc(-1 * var(--pad-x)); padding: 2px var(--pad-x) 4px; overflow-x: auto; scrollbar-width: none; justify-self: stretch; }
  .hb-steps::-webkit-scrollbar { display: none; }
  .bpmonitor .hb-steps li { flex: none; }
  .hb-steps button { grid-template-columns: auto auto; padding: 7px 13px; border-radius: 999px; white-space: nowrap; }
  .hb-steps button::before { grid-row: auto; padding-top: 1px; }
  .hb-steps b { font-size: .9375rem; }
  .hb-steps span { display: none; }
  .hb-play { margin-left: 0; }
}