/* 22:30 The vet report: three fanned A4 pages of Bella's PDF (white paper:
   the PDF pins the light scheme, so it reads on any sky), a condition
   picker that brings a different lead section to the front, and Share PDF
   flying the report to the vet. Inside a page, sizes are in --u: 1/320 of
   the page width (the real A4 page with its type enlarged by about 1.7, so
   it reads at this size). */

#stage-vet { --stage-h: 660px; }

#stage-vet .x-vet {
  --page-w: min(282px, calc(100vw - 108px));
  --x-vet-lens: rgba(255, 255, 255, 0.96);
  --x-vet-lens-ring: rgba(29, 16, 70, 0.06);
  position: relative;
  width: min(100%, 600px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "picker picker" "deck deck" "acts vet";
  align-items: center;
  gap: 6px 12px;
}
html[data-ink="light"] #stage-vet .x-vet {
  --x-vet-lens: rgba(255, 255, 255, 0.2);
  --x-vet-lens-ring: rgba(255, 255, 255, 0.22);
}

/* ---- The condition picker (a glass choice picker, page tokens) --------- */

#stage-vet .x-vet-picker {
  grid-area: picker;
  justify-self: center;
  position: relative; z-index: 3;
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
}
#stage-vet .x-vet-picker button {
  position: relative; z-index: 1;
  height: 36px; padding: 0 12px;
  border: 0; border-radius: var(--r-pill);
  background: none;
  font: 650 14px/1 var(--font-body);
  color: var(--ink-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s var(--ease-fade);
}
#stage-vet .x-vet-picker button[aria-checked="true"] { color: var(--ink); }
/* A 44 px+ hit area: vertical overhang only, so neighbours never overlap. */
#stage-vet .x-vet-picker button::before { content: ""; position: absolute; inset: -8px 0; }
#stage-vet .x-vet-picker button:focus-visible { outline: 3px solid #8B6CFF; outline-offset: 1px; border-radius: var(--r-pill); }
html[data-ink="light"] #stage-vet .x-vet-picker button:focus-visible,
html[data-ink="light"] #stage-vet .x-vet-replay:focus-visible,
html[data-ink="light"] #stage-vet .x-vet-share:focus-visible { outline-color: #fff; }
#stage-vet .x-vet-lens {
  position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--x-vet-lens);
  box-shadow: 0 2px 10px rgba(29, 16, 70, 0.16), inset 0 0 0 1px var(--x-vet-lens-ring);
  transition: transform var(--spring-land-ms) var(--spring-land), width var(--spring-land-ms) var(--spring-land);
}
#stage-vet .x-vet-lens.is-instant { transition: none; }

/* ---- The deck of pages --------------------------------------------------- */

#stage-vet .x-vet-deck {
  --t-back: translate(-3%, 1.5%) rotate(-4deg);
  --t-mid: translate(3%, 0.5%) rotate(3.5deg);
  --t-front: rotate(-1deg);
  /* The page being brought forward rises into the deck's top padding, so
     it never slides under the picker's glass. */
  --deck-pad: 44px;
  --t-lift: translate(-1.5%, -38px) rotate(-3deg);
  grid-area: deck;
  position: relative; z-index: 1;
  height: calc(var(--page-w) * 1.414 + var(--deck-pad) + 16px);
}
#stage-vet .x-vet-page {
  --u: calc(100cqw / 320);
  position: absolute; left: 50%; top: var(--deck-pad);
  width: var(--page-w);
  margin-left: calc(var(--page-w) / -2);
  aspect-ratio: 360 / 509;
  container-type: inline-size;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
  color: #000;
  font-family: var(--font-body);
  letter-spacing: 0;
  text-align: left;
  transform-origin: 50% 100%;
  box-shadow: 0 1px 2px rgba(10, 4, 40, 0.12), 0 14px 34px rgba(10, 4, 40, 0.22), 0 40px 80px rgba(10, 4, 40, 0.18);
  -webkit-user-select: none; user-select: none;
}
#stage-vet .x-vet-page[data-slot="back"] { transform: var(--t-back); z-index: 1; }
#stage-vet .x-vet-page[data-slot="mid"] { transform: var(--t-mid); z-index: 2; }
#stage-vet .x-vet-page[data-slot="front"] { transform: var(--t-front); z-index: 3; }
#stage-vet .x-vet-page[data-slot="mid"]::after,
#stage-vet .x-vet-page[data-slot="back"]::after {      /* the pages behind sit in the front page's shade */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 10, 60, 0) 40%, rgba(20, 10, 60, 0.1));
}
#stage-vet .x-vet-page.x-vet-fly { z-index: 6; }

/* Page chrome (VetReportViews: header, footer). */
#stage-vet .x-vet-page > * { margin-inline: calc(20 * var(--u)); }
#stage-vet .x-vet-hd {
  display: flex; align-items: center; gap: calc(5 * var(--u));
  margin-top: calc(18 * var(--u));
  font-size: calc(9 * var(--u)); line-height: 1;
  color: #8E8E93;
  white-space: nowrap;
}
#stage-vet .x-vet-hd img { width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: calc(3.5 * var(--u)); }
#stage-vet .x-vet-hd b { font: 400 calc(13 * var(--u))/1 var(--font-display); color: #1C1C1E; margin-right: calc(2 * var(--u)); }
#stage-vet .x-vet-hd em { margin-left: auto; font-style: normal; }
#stage-vet .x-vet-body {
  flex: 1; min-height: 0;
  margin-top: calc(14 * var(--u));
  font-size: calc(9.5 * var(--u)); line-height: 1.3;
}
#stage-vet .x-vet-ft {
  display: flex; justify-content: space-between; gap: calc(8 * var(--u));
  margin-bottom: calc(14 * var(--u));
  font-size: calc(7 * var(--u)); line-height: 1.2;
  color: #8E8E93;
  white-space: nowrap;
}
#stage-vet .x-vet-ft i { font-style: normal; margin-left: calc(6 * var(--u)); }

/* Page content. */
#stage-vet .x-vet-h { font: 600 calc(14 * var(--u))/1.2 var(--font-body); color: #000; margin: 0 0 calc(7 * var(--u)); }
#stage-vet .x-vet-h ~ .x-vet-h, #stage-vet .x-vet-sec + .x-vet-sec { margin-top: calc(16 * var(--u)); }
#stage-vet .x-vet-name { font: 700 calc(24 * var(--u))/1.1 var(--font-body); margin-bottom: calc(10 * var(--u)); }
#stage-vet .x-vet-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: calc(4.5 * var(--u)) calc(12 * var(--u)); margin: 0 0 calc(14 * var(--u)); }
#stage-vet .x-vet-kv-tight { grid-template-columns: calc(70 * var(--u)) 1fr; }
#stage-vet .x-vet-kv dt { color: #8E8E93; }
#stage-vet .x-vet-kv dd { margin: 0; }
#stage-vet .x-vet-p { line-height: 1.4; }
#stage-vet .x-vet-food { margin-top: calc(4 * var(--u)); }
#stage-vet .x-vet-dim { color: #8E8E93; }
#stage-vet .x-vet-fine { margin-top: calc(4 * var(--u)); font-size: calc(7.5 * var(--u)); line-height: 1.35; color: #8E8E93; }

#stage-vet .x-vet-table { border-collapse: collapse; font-size: calc(9 * var(--u)); line-height: 1.25; font-variant-numeric: tabular-nums; }
#stage-vet .x-vet-table th {
  padding: 0 calc(8 * var(--u)) calc(3 * var(--u)) 0;
  text-align: left; font-weight: 600; white-space: nowrap;
  border-bottom: calc(0.7 * var(--u)) solid #C8C8CC;
}
#stage-vet .x-vet-table td { padding: calc(1.7 * var(--u)) calc(8 * var(--u)) calc(1.7 * var(--u)) 0; white-space: nowrap; vertical-align: middle; }
#stage-vet .x-vet-table tbody tr:first-child td { padding-top: calc(4 * var(--u)); }
#stage-vet .x-vet-sc {
  display: inline-block; min-width: calc(13 * var(--u));
  padding: calc(0.4 * var(--u)) calc(3 * var(--u));
  border-radius: calc(3 * var(--u));
  background: color-mix(in srgb, var(--c) 28%, #fff);
  text-align: center; font-weight: 600;
}
#stage-vet .x-vet-scale { margin-top: calc(12 * var(--u)); }
#stage-vet .x-vet-scale h4 { margin: 0 0 calc(4 * var(--u)); font: 600 calc(9 * var(--u))/1.2 var(--font-body); }
#stage-vet .x-vet-scale ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto);
  justify-content: start; gap: calc(2 * var(--u)) calc(16 * var(--u));
  font-size: calc(8.5 * var(--u));
}
#stage-vet .x-vet-scale li { display: flex; align-items: center; gap: calc(4 * var(--u)); font-variant-numeric: tabular-nums; }
#stage-vet .x-vet-scale i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--c); margin-right: calc(1 * var(--u)); }
#stage-vet .x-vet-scale span { color: #8E8E93; margin-left: calc(2 * var(--u)); }

/* Adherence grid and check-in trends (VetReportSectionPages). */
#stage-vet .x-vet-legend { display: flex; flex-wrap: wrap; align-items: center; gap: calc(3 * var(--u)) calc(9 * var(--u)); font-size: calc(8 * var(--u)); }
#stage-vet .x-vet-legend > span { display: inline-flex; align-items: center; gap: calc(3.5 * var(--u)); }
#stage-vet .x-vet-legend .sw { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: calc(1.5 * var(--u)); background: var(--c); }
#stage-vet .x-vet-legend .x-vet-dim { font-size: calc(7.5 * var(--u)); }
#stage-vet .x-vet-gname { margin-top: calc(10 * var(--u)); font-size: calc(10.5 * var(--u)); }
#stage-vet .x-vet-gname b { font-weight: 700; margin-right: calc(4 * var(--u)); }
#stage-vet .x-vet-strip { display: grid; grid-template-columns: calc(38 * var(--u)) 1fr; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(3.5 * var(--u)); }
#stage-vet .x-vet-strip > span { font-size: calc(7.5 * var(--u)); color: #8E8E93; text-align: right; font-variant-numeric: tabular-nums; }
#stage-vet .x-vet-cells { display: grid; grid-template-columns: repeat(28, 1fr); gap: calc(1.3 * var(--u)); }
#stage-vet .x-vet-cells > i { height: calc(7.5 * var(--u)); border-radius: calc(1.4 * var(--u)); background: var(--c, #EDEDED); }
#stage-vet .x-vet-ticks { position: relative; height: calc(11 * var(--u)); margin-top: calc(2 * var(--u)); font-size: calc(6.5 * var(--u)); color: #8E8E93; }
#stage-vet .x-vet-ticks span { position: absolute; top: 0; padding-top: calc(4 * var(--u)); white-space: nowrap; }
#stage-vet .x-vet-ticks span::before { content: ""; position: absolute; left: 0; top: 0; width: calc(0.6 * var(--u)); height: calc(3 * var(--u)); background: rgba(0, 0, 0, 0.4); }
#stage-vet .x-vet-capt { margin-top: calc(3 * var(--u)); font-size: calc(9 * var(--u)); line-height: 1.4; }
#stage-vet .x-vet-capt p { margin: 0; }
#stage-vet .x-vet-trows { display: grid; gap: calc(4 * var(--u)); margin-top: calc(6 * var(--u)); }
#stage-vet .x-vet-trow { display: grid; grid-template-columns: calc(52 * var(--u)) 1fr; align-items: center; gap: calc(6 * var(--u)); }
#stage-vet .x-vet-trow > span { font-size: calc(8.5 * var(--u)); }
#stage-vet .x-vet-marks { display: grid; grid-template-columns: repeat(28, 1fr); background: #F6F6F6; height: calc(11 * var(--u)); }
#stage-vet .x-vet-marks > i { position: relative; }
#stage-vet .x-vet-marks > i::before { content: none; position: absolute; }
#stage-vet .x-vet-marks > i.up::before, #stage-vet .x-vet-marks > i.down::before {
  content: ""; left: 8%; right: 8%; height: calc(4.4 * var(--u));
  background: rgba(0, 0, 0, 0.78);
}
#stage-vet .x-vet-marks > i.up::before { top: calc(0.8 * var(--u)); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
#stage-vet .x-vet-marks > i.down::before { bottom: calc(0.8 * var(--u)); clip-path: polygon(0 0, 100% 0, 50% 100%); }
#stage-vet .x-vet-marks > i.same::before {
  content: ""; left: 50%; top: 50%;
  width: calc(2.5 * var(--u)); height: calc(2.5 * var(--u));
  margin: calc(-1.25 * var(--u)) 0 0 calc(-1.25 * var(--u));
  border-radius: 50%; background: rgba(0, 0, 0, 0.32);
}
#stage-vet .x-vet-marks > i[data-l]::before { content: ""; left: 0; right: 0; top: calc(2 * var(--u)); bottom: calc(2 * var(--u)); }
#stage-vet .x-vet-marks > i[data-l="0"]::before, #stage-vet .x-vet-legend .lv0 { background: rgba(0, 0, 0, 0.1); }
#stage-vet .x-vet-marks > i[data-l="1"]::before, #stage-vet .x-vet-legend .lv1 { background: rgba(0, 0, 0, 0.32); }
#stage-vet .x-vet-marks > i[data-l="2"]::before, #stage-vet .x-vet-legend .lv2 { background: rgba(0, 0, 0, 0.56); }
#stage-vet .x-vet-marks > i[data-l="3"]::before, #stage-vet .x-vet-legend .lv3 { background: rgba(0, 0, 0, 0.85); }
#stage-vet .x-vet-legend .mk { position: relative; width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
#stage-vet .x-vet-legend .mk.up { background: rgba(0, 0, 0, 0.78); clip-path: polygon(50% 8%, 100% 92%, 0 92%); }
#stage-vet .x-vet-legend .mk.down { background: rgba(0, 0, 0, 0.78); clip-path: polygon(0 8%, 100% 8%, 50% 92%); }
#stage-vet .x-vet-legend .mk.same { width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); border-radius: 50%; background: rgba(0, 0, 0, 0.32); margin-inline: calc(2 * var(--u)); }
#stage-vet .x-vet-legend .lv { width: calc(6 * var(--u)); height: calc(7 * var(--u)); }
#stage-vet .x-vet-legend b { font-weight: 600; }

/* Symptoms (the seizure timeline). */
#stage-vet .x-vet-sum { font-size: calc(10.5 * var(--u)); font-weight: 600; }
#stage-vet .x-vet-sum2 { font-size: calc(10 * var(--u)); margin-top: calc(2 * var(--u)); }
#stage-vet .x-vet-symwrap { position: relative; margin-top: calc(9 * var(--u)); }
#stage-vet .x-vet-sym { width: 100%; }
#stage-vet .x-vet-sym td:first-child { padding-right: calc(10 * var(--u)); }
#stage-vet .x-vet-sym .sev { display: inline-flex; align-items: center; gap: calc(3.5 * var(--u)); }
#stage-vet .x-vet-sym .sev i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--c); }
#stage-vet .x-vet-sym tr.note td { padding-top: 0; font-size: calc(7.5 * var(--u)); color: #8E8E93; }
#stage-vet .x-vet-tag {
  display: inline-block; margin-left: calc(3 * var(--u));
  padding: 0 calc(3.5 * var(--u));
  border: calc(0.6 * var(--u)) solid rgba(0, 0, 0, 0.4); border-radius: var(--r-pill);
  font-size: calc(7 * var(--u)); font-weight: 600; line-height: 1.45; color: #8E8E93;
  vertical-align: calc(0.5 * var(--u));
}
#stage-vet .x-vet-bracket {                 /* in the page margin, right of the table */
  position: absolute; right: calc(-9 * var(--u));
  width: calc(6 * var(--u));
  border: calc(1.4 * var(--u)) solid #8B6CFF; border-left: 0;
  border-radius: 0 calc(4 * var(--u)) calc(4 * var(--u)) 0;
  transform-origin: 50% 0;
}
#stage-vet .x-vet-page[data-slot="mid"] .x-vet-bracket,
#stage-vet .x-vet-page[data-slot="back"] .x-vet-bracket { opacity: 0; }   /* it would peek out of the fan */
#stage-vet .x-vet-bracket::after {
  content: ""; position: absolute; top: 50%; right: calc(-4.4 * var(--u));
  width: calc(3.6 * var(--u)); height: calc(1.4 * var(--u)); margin-top: calc(-0.7 * var(--u));
  background: #8B6CFF; border-radius: 2px;
}
#stage-vet .x-vet-gi { margin-top: calc(6 * var(--u)); }
#stage-vet .x-vet-gi td:first-child, #stage-vet .x-vet-gi th:first-child { padding-right: calc(12 * var(--u)); }

/* ---- Your vet ---------------------------------------------------------- */

#stage-vet .x-vet-vet { grid-area: vet; display: grid; justify-items: center; gap: 6px; }
#stage-vet .x-vet-badge {
  position: relative;
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
#stage-vet .x-vet-badge img { width: 72%; height: 72%; object-fit: contain; }
#stage-vet .x-vet-ok {
  position: absolute; right: -3px; bottom: -3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ok) url('/img/ui/check.svg') center / 100% no-repeat;
  box-shadow: 0 2px 8px rgba(20, 90, 40, 0.35);
  opacity: 0; transform: scale(0.3);
}
#stage-vet .x-vet-badge.is-done .x-vet-ok { opacity: 1; transform: none; }
#stage-vet .x-vet-ring {
  position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--ok); opacity: 0; pointer-events: none;
}
#stage-vet .x-vet-vet-k { font: 650 13px/1.2 var(--font-round); color: var(--ink-2); white-space: nowrap; }

/* ---- Share, period, replay ------------------------------------------------ */

#stage-vet .x-vet-acts {
  grid-area: acts;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
#stage-vet .x-vet-share { height: 46px; padding: 0 20px 0 16px; font-size: 16px; }
#stage-vet .x-vet-share svg { width: 20px; height: 20px; margin-top: -2px; }
#stage-vet .x-vet-cap { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); }
#stage-vet .x-vet-cap .pro { vertical-align: 0; }
#stage-vet .x-vet-replay {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px 0 11px;
  border-radius: var(--r-pill);
  background: var(--glass-strong); border: 1px solid var(--glass-line);
  color: var(--ink); font: 650 14px/1 var(--font-body);
  cursor: pointer;
  transition: transform 0.45s var(--spring-pop);
}
#stage-vet .x-vet-replay { position: relative; }
#stage-vet .x-vet-replay::before { content: ""; position: absolute; inset: -5px; }   /* a 44 px hit area */
#stage-vet .x-vet-replay:hover { transform: scale(1.04); }
#stage-vet .x-vet-replay:focus-visible { outline: 3px solid #8B6CFF; outline-offset: 3px; }
#stage-vet .x-vet-replay svg { width: 16px; height: 16px; }

@media (min-width: 600px) {
  #stage-vet { --stage-h: 710px; }
  #stage-vet .x-vet {
    --page-w: 350px;
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-areas: "picker ." "deck vet" "acts .";
    gap: 8px 8px;
  }
  #stage-vet .x-vet-deck {
    --deck-pad: 54px;
    --t-back: translate(-8%, 1.5%) rotate(-7deg);
    --t-mid: translate(8%, 0.5%) rotate(5.5deg);
    --t-lift: translate(-1.5%, -48px) rotate(-3deg);
  }
  #stage-vet .x-vet-acts { justify-content: center; }
  #stage-vet .x-vet-badge { width: 80px; height: 80px; }
  #stage-vet .x-vet-ok { width: 28px; height: 28px; }
  #stage-vet .x-vet-picker button { height: 38px; padding: 0 16px; font-size: 15px; }
}