/* ============================================================
   Upcoming visit detail — the "maximised" view of the 24 OCT card.

   The header is the same component as the 28 SEP view ("iPhone 16 - 3",
   4:262): caret 18/113, title 55/110, eyebrow 24/177, status chip on
   the right at 175, date 24/195, hospital 24/237, reason 24/308, rule
   24/374, body from 389. Those coordinates are reproduced exactly so
   the two screens don't shift when you move between them.

   Below the rule they diverge. A visit that hasn't happened has no
   summary, no prescription and no recording — those blocks describe an
   event in the past. What it does have is the arrangement: when, who is
   taking Aai, what will be asked, what will be tested, and who knows.

   The header is absolutely positioned (to hold those exact offsets);
   the body is a flow column, like the Add-visit screens.
   ============================================================ */

@import url("shell.css");

.screen__canvas { height: auto; min-height: var(--screen-h); padding-bottom: 96px; }

/* ---- Header ------------------------------------------------- */
.uv-head { position: relative; height: 389px; }

/* Caret centred on the title's cap band (115–135, centre 125), the
   same correction made on the other detail screens. */
.uv-back {
  position: absolute;
  left: 18px;
  top: 113px;
  width: 24px;
  height: 24px;
  display: block;
}
.uv-back img { width: 24px; height: 24px; display: block; }
.uv-back::after { content: ""; position: absolute; inset: -10px; }
.uv-back:active { transform: scale(0.92); }

.uv-title {
  position: absolute;
  left: 55px;
  top: 110px;
  font-size: 28px;
  font-weight: 500;
  line-height: 31px;
  color: #000000;
}

/* Delete — a plain text control rather than a filled button. It is
   destructive, so it should be findable but never the thing the eye
   lands on first; the CTA weight in this app belongs to the blue.
   #c0392b rather than the app's #ed4546: the brand red measures only
   3.8:1 on this ground, which fails at a 12px label, and this one
   measures 5.0:1. Centred on the same 125 as the caret and the title. */
.uv-delete {
  position: absolute;
  right: 24px;
  top: 113px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #c0392b;
  cursor: pointer;
}
.uv-delete::after { content: ""; position: absolute; inset: -10px -8px; }
.uv-delete svg { display: block; }
.uv-delete:active { transform: scale(0.96); }

.uv-ago {
  position: absolute;
  left: 24px;
  top: 177px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-400);
}

.uv-date {
  position: absolute;
  left: 24px;
  top: 195px;
  font-size: 14px;
  font-weight: 500;
  line-height: 15px;
  color: var(--text-600);
}

.uv-hospital {
  position: absolute;
  left: 24px;
  top: 237px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.uv-hospital__name   { font-size: 20px; font-weight: 500; line-height: 22px; color: var(--text-900); }
.uv-hospital__doctor { font-size: 12px; line-height: 13px; color: var(--text-700); }

.uv-reason {
  position: absolute;
  left: 24px;
  top: 308px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.uv-reason__label { font-size: 10px; line-height: 11px; color: var(--text-400); }
.uv-reason__text  { font-size: 12px; line-height: 15px; color: var(--text-700); }

.uv-rule {
  position: absolute;
  left: 24px;
  top: 374px;
  width: 344px;
  height: 0.5px;
  display: block;
}

/* The status chip sits at the right edge, as "Completed" does on the
   28 SEP view. Mint on white here — the dark scrim version is only
   needed where this chip lands on the filled blue card. */
.chip {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  border-radius: var(--radius-chip);
}
.chip__label { font-size: 10px; line-height: 15px; white-space: nowrap; }

.chip--helper {
  right: 24px;
  top: 175px;
  padding: 0 10px;
  background: #d9f7e5;
}
.chip--helper .chip__label { color: #0a5c2c; }

/* ---- Body --------------------------------------------------- */
.uv-body {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.uv-block { display: flex; flex-direction: column; gap: 10px; }

.uv-block__label {
  font-size: 12px;
  line-height: 13px;
  color: var(--text-500);
}

.screen .uv-when,
.screen .uv-when__sub,
.screen .uv-after,
.screen .uv-sub,
.screen .uv-qlist,
.screen .uv-list,
.screen .uv-notice,
.screen .uv-helper__v { white-space: normal; }

.uv-when      { font-size: 16px; font-weight: 500; line-height: 20px; color: var(--text-900); }
.uv-when__sub { font-size: 12px; line-height: 16px; color: var(--text-700); margin-top: -4px; }

.uv-sub { font-size: 10px; line-height: 14px; color: var(--text-400); }

/* ---- Helper card -------------------------------------------- */
.uv-helper {
  border-radius: 14px;
  background: var(--surface-card);
  box-shadow: inset 0 0 0 0.2px var(--blue);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.uv-helper__top { display: flex; align-items: center; gap: 12px; }
.uv-helper__avatar { width: 40px; height: 40px; display: block; flex: 0 0 auto; }
.uv-helper__body { flex: 1; min-width: 0; }
.uv-helper__name { font-size: 16px; font-weight: 500; line-height: 20px; color: var(--text-900); }
.uv-helper__role { font-size: 12px; line-height: 15px; color: var(--text-700); margin-top: 2px; }

.uv-helper__badge {
  flex: 0 0 auto;
  height: 20px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-chip);
  background: #e6f9ee;
  font-size: 10px;
  color: #0a5c2c;
  white-space: nowrap;
}

.uv-helper__rule { height: 0.5px; background: #bfd0ff; }

.uv-helper__row { display: flex; align-items: baseline; gap: 12px; }
.uv-helper__k { flex: 0 0 84px; font-size: 10px; line-height: 16px; color: var(--text-400); }
.uv-helper__v { flex: 1; min-width: 0; font-size: 12px; line-height: 16px; color: var(--text-900); }

.uv-notice {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--chip-helper-bg);
  font-size: 11px;
  line-height: 16px;
  color: #0a7a37;
}
.uv-notice__tick {
  flex: 0 0 auto;
  width: 12px;
  height: 7px;
  margin-top: 4px;
  border-left: 2px solid #0b9241;
  border-bottom: 2px solid #0b9241;
  rotate: -45deg;
}

/* ---- Lists --------------------------------------------------- */
/* Same treatment as the 28 SEP view's .vd-list / .vd-qa__q: an 18px
   indent with the marker in the gutter. */
.uv-qlist,
.uv-list {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--text-900);
}
.uv-qlist { list-style: decimal; font-weight: 500; }
.uv-list  { list-style: disc; }
.uv-qlist li,
.uv-list li { margin-left: 18px; line-height: 19px; }
.uv-qlist li + li,
.uv-list li + li { margin-top: 6px; }

.uv-after { font-size: 12px; line-height: 19px; color: var(--text-900); }

/* ---- Care circle --------------------------------------------- */
.uv-people {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface-card);
  box-shadow: inset 0 0 0 0.2px var(--blue);
}
.uv-people img { width: 32px; height: 32px; display: block; }
.uv-people__names { font-size: 13px; line-height: 17px; color: var(--text-900); }
.uv-people__sub { font-size: 10px; line-height: 13px; color: var(--text-400); margin-top: 1px; }

/* ---- Focus --------------------------------------------------- */
:focus-visible { outline: 2px solid var(--color-focus, #0462d3); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

/* ---- Delete confirmation sheet -------------------------------
   The tab bar sits at z-index 4 in shell.css, so this clears it. */
.uv-sheet { position: absolute; inset: 0; z-index: 10; }
.uv-sheet[hidden] { display: none; }

.uv-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(17, 22, 40, 0.38);
}

.uv-sheet__panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface-card);
  box-shadow: 0 8px 28px rgba(21, 25, 31, 0.18);
}

.uv-sheet__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--text-900);
}

.screen .uv-sheet__body { white-space: normal; }
.uv-sheet__body {
  margin-top: 6px;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-700);
}

.uv-sheet__actions { display: flex; gap: 10px; margin-top: 18px; }

.uv-sheet__btn {
  flex: 1;
  height: 46px;
  border: 0;
  border-radius: 26px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.uv-sheet__btn--keep { background: #eaefff; color: #1c1c1c; }
/* White on #c0392b measures 5.4:1 */
.uv-sheet__btn--del  { background: #c0392b; color: #ffffff; }
.uv-sheet__btn:active { transform: scale(0.99); }

/* ============================================================
   Visit in progress
   From the day before onwards this page stops being a booking and
   becomes a status board. Hanu should be able to glance at it once and
   go back to work: the stage in one line, who has Maa, what happened
   when, what was asked, what it cost.

   Same 24px gutter, card chrome (white, 0.2px blue hairline, 14px
   radius) and type scale as the upcoming view above, so switching
   between the two modes doesn't feel like a different app.
   ============================================================ */

/* The detail header collapses to just the caret and the title. */
.is-live .uv-head { height: 150px; }
.is-live .uv-delete,
.is-live .uv-ago,
.is-live .uv-head .chip,
.is-live .uv-date,
.is-live .uv-hospital,
.is-live .uv-reason,
.is-live .uv-rule,
.is-live .uv-body { display: none; }

.lv[hidden] { display: none; }
.lv {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Everything in here is flowing copy, not a pinned Figma label. */
.screen .lv p,
.screen .lv-doc__photo p,
.screen .demo p { white-space: normal; }

.lv-card {
  border-radius: 14px;
  background: var(--surface-card);
  box-shadow: inset 0 0 0 0.2px var(--blue);
  padding: 14px 16px;
}

.lv-block { display: flex; flex-direction: column; gap: 10px; }
.lv-block__label { font-size: 12px; line-height: 13px; color: var(--text-500); }

.lv-note { font-size: 11px; line-height: 16px; color: var(--text-500); }

.lv-bell { width: 13px; height: 13px; flex: 0 0 auto; display: block; fill: currentColor; }

/* ---- Exception banner ---------------------------------------
   Above everything, because when it exists it is the only thing that
   matters. Light red for problems the app has already handled or that
   need a decision; solid red for the emergency, where nothing else on
   the page should compete with it. #b3261e on #fdeceb is 5.7:1. */
.lv-banner[hidden] { display: none; }
.lv-banner {
  border-radius: 14px;
  padding: 14px 16px;
  background: #fdeceb;
  box-shadow: inset 0 0 0 1px rgba(192, 57, 43, 0.35);
  color: #5c1f1a;
}
.lv-banner.just-in { animation: lv-in 0.32s ease-out; }
.lv-banner__top { display: flex; align-items: flex-start; gap: 8px; }
.lv-banner__top .lv-bell { width: 16px; height: 16px; margin-top: 2px; color: #b3261e; }
.lv-banner__title { font-size: 15px; font-weight: 600; line-height: 20px; color: #b3261e; }
.lv-banner__text { margin-top: 4px; font-size: 12px; line-height: 17px; }
.lv-banner__note {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  line-height: 17px;
}
.lv-banner__note b { display: block; font-size: 10px; font-weight: 500; color: #8a3a32; }
.lv-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lv-banner__foot { margin-top: 10px; font-size: 11px; line-height: 15px; }

.lv-banner .lv-btn { flex: 1 1 auto; background: #ffffff; color: #b3261e; box-shadow: inset 0 0 0 1px rgba(179, 38, 30, 0.4); }
.lv-banner .lv-btn--primary { background: #b3261e; color: #ffffff; box-shadow: none; }

/* White on #c0392b is 5.4:1 */
.lv-banner--severe { background: #c0392b; box-shadow: none; color: #ffffff; }
.lv-banner--severe .lv-banner__title,
.lv-banner--severe .lv-banner__top .lv-bell { color: #ffffff; }
.lv-banner--severe .lv-btn { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); }
.lv-banner--severe .lv-btn--primary { background: #ffffff; color: #b3261e; box-shadow: none; }

/* ---- Status header ------------------------------------------ */
.lv-status__eyebrow { font-size: 12px; line-height: 16px; color: var(--text-400); }
.lv-status__line {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: var(--text-900);
}
.lv-status__line.is-changed { animation: lv-in 0.32s ease-out; }
.lv-status__updated {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 14px;
  color: var(--text-500);
}
/* A small live pulse while the visit is under way; it settles to grey
   once Maa is home, because then nothing is happening any more. */
.lv-status__updated::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2fd270;
}
.lv-status.is-ongoing .lv-status__updated::before { animation: lv-pulse 1.6s ease-in-out infinite; }
.lv-status.is-settled .lv-status__updated::before { background: var(--text-200); }

/* ---- Helper card --------------------------------------------- */
.lv-helper { display: flex; flex-direction: column; gap: 14px; }
.lv-helper__top { display: flex; align-items: center; gap: 12px; }
.lv-helper__photo { width: 44px; height: 44px; display: block; flex: 0 0 auto; border-radius: 50%; background: #eef2ff; }
.lv-helper__body { min-width: 0; }
.lv-helper__name { font-size: 16px; font-weight: 500; line-height: 20px; color: var(--text-900); }
.lv-helper__tags { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

.lv-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  line-height: 14px;
  color: #0a5c2c;
}
.lv-verified svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lv-tag {
  height: 18px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-chip);
  background: #fdf0f1;
  font-size: 10px;
  color: #9b2c34;
  white-space: nowrap;
}
.lv-tag--backup { background: #eef2ff; color: #2c4fc7; }

.lv-helper__actions { display: flex; gap: 10px; }

.lv-btn {
  flex: 1;
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 22px;
  background: #eaefff;
  color: #1c1c1c;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  cursor: pointer;
  text-decoration: none;
}
.lv-btn svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }
.lv-btn:active { transform: scale(0.98); }
/* White on the app's #4d76ff is only 3.9:1 at this size; #3558d8 is the
   same hue a step deeper and clears 4.5:1. */
.lv-btn--primary { background: #3558d8; color: #ffffff; }
.lv-btn--sm { flex: 0 0 auto; min-height: 32px; padding: 0 14px; font-size: 12px; }

/* ---- Timeline ------------------------------------------------ */
.lv-timeline { padding: 10px 12px 10px 10px; }
.lv-steps { list-style: none; margin: 0; padding: 0; }

.lv-step { position: relative; display: flex; gap: 8px; }

/* Rail: a dot per stage, joined by a line that fills in blue as the
   visit moves through it. */
.lv-step__rail { position: relative; flex: 0 0 18px; }
.lv-step::before {
  content: "";
  position: absolute;
  left: 8.25px;
  top: 27px;
  bottom: -9px;
  width: 1.5px;
  background: #dfe4f2;
  transition: background-color 0.4s ease;
}
.lv-step:last-child::before { display: none; }
.lv-step.is-done::before { background: var(--blue); }

.lv-dot {
  position: absolute;
  left: 0;
  top: 9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px #cfd4e2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.lv-dot__tick { width: 12px; height: 12px; fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: none; }
.lv-step.is-done .lv-dot { background: var(--blue); box-shadow: none; }
.lv-step.is-done .lv-dot__tick { display: block; }
.lv-step.just-done .lv-dot__tick { animation: lv-pop 0.36s cubic-bezier(.3, 1.5, .5, 1); }
.lv-step.is-current .lv-dot { box-shadow: inset 0 0 0 2px var(--blue); }
.lv-step.is-current .lv-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}
.lv-step.just-current .lv-dot::after { animation: lv-pop 0.36s ease-out; }

.lv-step__main {
  flex: 1;
  min-width: 0;
  margin: 2px 0;
  padding: 7px 10px;
  border-radius: 10px;
  background: transparent;
  transition: background-color 0.35s ease;
}
.lv-step.is-current .lv-step__main { background: #eef2ff; }

.lv-step__top { display: flex; align-items: center; gap: 5px; min-height: 18px; }
.lv-step__name { font-size: 12px; font-weight: 500; line-height: 18px; color: var(--text-900); }
.lv-step.is-current .lv-step__name { color: #2f55d4; }
.lv-step.is-future .lv-step__name { font-weight: 400; color: #767676; }
.lv-step__top .lv-bell { color: var(--text-500); }
.lv-step.is-future .lv-bell { opacity: 0.6; }
.lv-step__time { margin-left: auto; font-size: 11px; line-height: 18px; color: var(--text-500); white-space: nowrap; }

.lv-step__body { margin-top: 2px; }
.lv-step.is-future .lv-step__body,
.lv-step.is-future .lv-step__time { display: none; }
.lv-step.just-current .lv-step__body { animation: lv-in 0.32s ease-out; }
.lv-step__text { font-size: 13px; line-height: 18px; color: var(--text-900); }
.lv-step.is-done .lv-step__text { color: var(--text-700); }
.lv-step__sub {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 15px;
  color: #0a5c2c;
}
.lv-step__sub svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---- Map (On the way only) -----------------------------------
   The helper's route to Maa's door, never Maa's position: the moment
   she is picked up, this card goes away and only stage updates remain. */
.lv-map { margin-top: 10px; }
.lv-step:not(.is-current) .lv-map { display: none; }
.lv-map__frame {
  position: relative;
  height: 128px;
  border-radius: 10px;
  overflow: hidden;
  background: #eef1f6;
  box-shadow: inset 0 0 0 0.5px #cfd8f2;
}
.lv-map__frame svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lv-map__eta {
  position: absolute;
  left: 8px;
  top: 8px;
  height: 22px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  border-radius: 11px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(21, 25, 31, 0.12);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-900);
  white-space: nowrap;
}
.lv-map__pulse { transform-origin: center; transform-box: fill-box; animation: lv-ring 1.8s ease-out infinite; }
.lv-map__cap { margin-top: 6px; font-size: 10px; line-height: 14px; color: var(--text-500); }

/* ---- AI summary (Summary ready) ------------------------------ */
.lv-sum {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: inset 0 0 0 0.5px #c3d1ff;
}
.lv-sum__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.02em;
  color: #2c4fc7;
}
.lv-sum__label svg { width: 12px; height: 12px; fill: currentColor; }
.lv-sum__list { margin: 8px 0 0; padding: 0; list-style: disc; font-size: 12px; color: var(--text-900); }
.lv-sum__list li { margin-left: 16px; line-height: 18px; }
.lv-sum__list li + li { margin-top: 4px; }
.lv-sum__link {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #2c4fc7;
  cursor: pointer;
}
.lv-sum__link::after { content: "\203A"; font-size: 15px; line-height: 1; }

.lv-follow {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid #bfd0ff;
}
.lv-follow__q { font-size: 12px; font-weight: 500; line-height: 17px; color: var(--text-900); }
.lv-follow__actions { display: flex; gap: 8px; margin-top: 8px; }
.lv-follow__done { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 17px; color: #0a5c2c; animation: lv-in 0.3s ease-out; }
.lv-follow__done svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---- Questions ---------------------------------------------- */
.lv-qs { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lv-q { display: flex; align-items: flex-start; gap: 10px; }
.lv-q__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #cfd4e2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.lv-q__box svg { width: 11px; height: 11px; fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: none; }
.lv-q.is-asked .lv-q__box { background: #0b9241; box-shadow: none; }
.lv-q.is-asked .lv-q__box svg { display: block; }
.lv-q.just-asked .lv-q__box svg { animation: lv-pop 0.36s cubic-bezier(.3, 1.5, .5, 1); }
.lv-q__text { font-size: 13px; line-height: 20px; color: var(--text-900); }
.lv-q__when { font-size: 10px; line-height: 14px; color: #0a5c2c; }

/* ---- Spent so far -------------------------------------------- */
.lv-spend__total { font-size: 22px; font-weight: 500; line-height: 28px; color: var(--text-900); }
.lv-spend__by { margin-top: 2px; }
.lv-spend__list { list-style: none; margin: 8px 0 0; padding: 0; }
.lv-spend__list:empty { display: none; }
.lv-spend__list li + li { border-top: 0.5px solid #e3e8f7; }
.lv-spend__row {
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.lv-spend__row.is-new { animation: lv-in 0.32s ease-out; }
.lv-spend__label { flex: 1; font-size: 13px; color: var(--text-900); }
.lv-spend__time { font-size: 10px; color: var(--text-500); }
.lv-spend__amt { font-size: 13px; font-weight: 500; color: var(--text-900); }
.lv-spend__row img { width: 6px; height: 11px; display: block; opacity: 0.7; }

.lv-reason { padding-bottom: 4px; font-size: 11px; line-height: 15px; color: var(--text-400); }

/* ---- Receipt / prescription sheet ----------------------------- */
.lv-doc__eyebrow { font-size: 11px; line-height: 14px; color: var(--text-500); margin-bottom: 2px; }
.lv-doc__rows { margin: 12px 0 0; display: grid; grid-template-columns: 84px 1fr; row-gap: 6px; }
.lv-doc__rows dt { font-size: 11px; line-height: 17px; color: var(--text-500); }
.lv-doc__rows dd { margin: 0; font-size: 12px; line-height: 17px; color: var(--text-900); }
.lv-doc__photo {
  margin-top: 14px;
  height: 150px;
  padding: 18px 22px;
  border-radius: 12px;
  background: #f4f6fb;
  box-shadow: inset 0 0 0 1px #e1e6f2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lv-doc__photo span { height: 7px; border-radius: 4px; background: #dde3f0; }
.lv-doc__photo span.is-short { width: 55%; }
.lv-doc__photo p { margin-top: auto; font-size: 10px; line-height: 13px; color: var(--text-500); text-align: center; }

/* ---- Toast (calls, which a prototype can't actually place) ---- */
.lv-toast[hidden] { display: none; }
.lv-toast {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 84px;
  z-index: 8;
  padding: 12px 16px;
  border-radius: 14px;
  background: #ececf2;
  color: #3a3a3a;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(21, 25, 31, 0.12);
  animation: lv-in 0.25s ease-out;
}

/* ---- Demo controls ------------------------------------------- */
.demo[hidden] { display: none; }
.demo {
  position: absolute;
  right: 12px;
  bottom: 80px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.demo__pill {
  height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 13px;
  background: rgba(28, 28, 28, 0.55);
  color: #ffffff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.demo__pill:hover,
.demo__pill[aria-expanded="true"] { opacity: 1; }

.demo__panel[hidden] { display: none; }
.demo__panel {
  width: 236px;
  padding: 14px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(21, 25, 31, 0.2), inset 0 0 0 0.5px #d7def0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: lv-in 0.2s ease-out;
}
.demo__stage { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--text-900); }
.demo__row { display: flex; gap: 6px; }
.demo__btn,
.demo__reset,
.demo__select {
  height: 32px;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.demo__btn { flex: 1; background: #eaefff; color: #1c1c1c; }
.demo__btn--next { background: #3558d8; color: #ffffff; }
.demo__btn:disabled { opacity: 0.4; cursor: default; }
.demo__label { margin-top: 2px; font-size: 10px; color: var(--text-500); }
.demo__select { width: 100%; padding: 0 8px; background: #f4f6fb; color: var(--text-900); box-shadow: inset 0 0 0 0.5px #cfd8f2; }
.demo__reset { height: 26px; background: none; color: #c0392b; }

/* ---- Motion --------------------------------------------------- */
@keyframes lv-in    { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes lv-pop   { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes lv-ring  { from { transform: scale(0.6); opacity: 0.55; } to { transform: scale(2.2); opacity: 0; } }

/* Motion is keyed to transient just-* classes that render() adds only
   for what changed while you watched, so a page opened straight at
   ?stage=6 paints still. This guard stops the colour transitions from
   playing on that first paint as well. */
.lv.no-anim *,
.lv.no-anim *::before,
.lv.no-anim *::after { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .lv *, .lv *::before, .lv *::after, .demo__panel, .lv-toast { animation: none !important; transition: none !important; }
}