/* =========================================================================
   MedDex Lens — reading surface polish (October 2026)
   -------------------------------------------------------------------------
   Loaded last. Mostly scoped to a finished read (body.mdx-lens-result); the
   fitted film and the scan that runs over it also cover a captured image
   while it is analysed. Cine and fullscreen keep their own rules.
   ========================================================================= */

/* ---- The film is fitted to the room it has (app.js fitLensImage) -------- */
body.mdx .lens-v2 .lens-image-stage.is-fitted {
  inset: auto !important;
  left: var(--lens-fit-x) !important;
  top: var(--lens-fit-y) !important;
  width: var(--lens-fit-w) !important;
  height: var(--lens-fit-h) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}
body.mdx .lens-v2 .lens-image-stage.is-fitted > img {
  width: var(--lens-fit-w) !important;
  height: var(--lens-fit-h) !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

/* ---- One annotation layer --------------------------------------------------
   The named chips carry every label; the spatial layer's pins and numeral key
   would repeat them. (lens-spatial-ui.js already stops drawing them; this keeps
   a stale render from showing through.) */
body.mdx.mdx-lens-result #lensSpatialLayer.chips-own-labels .lsp-pin:not(.sel),
body.mdx.mdx-lens-result #lensSpatialLayer.chips-own-labels .lsp-legend { display: none !important; }
/* Named findings must receive taps before the spatial layer (z-index 6).
   The overlay background stays pointer-transparent, so bare-film exploration
   still reaches the spatial layer below it. */
body.mdx.mdx-lens-result #lensOverlayLayer { z-index: 7; }

/* ---- Labels: readable, quiet, and clearly tied to their place -------------- */
body.mdx.mdx-lens-result .lens-annotation { --lens-kind: #f59e0b; }
body.mdx.mdx-lens-result .lens-annotation.anatomical { --lens-kind: #38bdf8; }
body.mdx.mdx-lens-result .lens-annotation.abnormal.sev-mild { --lens-kind: #eab308; }
body.mdx.mdx-lens-result .lens-annotation.abnormal.sev-sev { --lens-kind: #f87171; }
body.mdx.mdx-lens-result .lens-annotation .lens-overlay-text {
  max-width: 168px;
  padding: 5px 9px 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--lens-kind);
  border-radius: 9px;
  background: rgba(9, 13, 22, 0.86);
  color: #f3f6fb;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.005em;
  line-height: 1.22;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: lensChipIn 260ms cubic-bezier(.2, .9, .2, 1) both;
}
/* Findings lead; anatomy is the quieter frame of reference around them. */
body.mdx.mdx-lens-result .lens-annotation.abnormal .lens-overlay-text {
  background: linear-gradient(90deg, color-mix(in srgb, var(--lens-kind) 16%, rgba(9, 13, 22, 0.9)), rgba(9, 13, 22, 0.9) 60%);
  border-color: color-mix(in srgb, var(--lens-kind) 34%, transparent);
  border-left-color: var(--lens-kind);
}
body.mdx.mdx-lens-result .lens-annotation.anatomical .lens-overlay-text {
  color: #dbeafe;
  font-weight: 560;
  background: rgba(9, 13, 22, 0.72);
}
/* Never smaller than legible: a crowded film sheds labels instead. */
body.mdx.mdx-lens-result .lens-annotation.lens-label-sm .lens-overlay-text,
body.mdx.mdx-lens-result .lens-layout-compact .lens-annotation .lens-overlay-text {
  font-size: 0.66rem;
  padding: 4px 8px 4px 9px;
  max-width: 140px;
  line-height: 1.2;
}
body.mdx.mdx-lens-result .lens-annotation:hover .lens-overlay-text,
body.mdx.mdx-lens-result .lens-annotation:focus-visible .lens-overlay-text {
  background: rgba(16, 23, 38, 0.95);
  transform: translate(-50%, -50%) scale(1.04);
}
body.mdx.mdx-lens-result .lens-annotation.active .lens-overlay-text {
  background: rgba(20, 30, 50, 0.97);
  border-color: color-mix(in srgb, var(--lens-kind) 60%, transparent);
  transform: translate(-50%, -50%) scale(1.06);
}
body.mdx.mdx-lens-result .lens-annotation:focus-visible { outline: none; }

/* Anchors: a crisp point where the place was measured, a soft halo where it
   is approximate ("about here"), so precision is visible without a word. */
body.mdx.mdx-lens-result .lens-annotation .lens-anchor {
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  background: var(--lens-kind);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lens-kind) 35%, transparent), 0 2px 6px rgba(0, 0, 0, 0.5);
}
body.mdx.mdx-lens-result .lens-annotation.approximate-localization .lens-anchor {
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  border: 1.5px dashed color-mix(in srgb, var(--lens-kind) 75%, transparent);
  background: radial-gradient(circle, var(--lens-kind) 0 3px, color-mix(in srgb, var(--lens-kind) 16%, transparent) 4px 100%);
  box-shadow: none;
}
body.mdx.mdx-lens-result .lens-annotation.shed .lens-anchor { opacity: 0.8; transform: scale(0.85); }
body.mdx.mdx-lens-result .lens-annotation.approximate-localization.shed .lens-anchor { transform: scale(0.7); }

/* Leaders are hairlines that point, not lines that compete with anatomy. */
body.mdx.mdx-lens-result .lens-connector-path { stroke: rgba(226, 238, 255, 0.92); stroke-width: 1.25; opacity: 0.9; }
body.mdx.mdx-lens-result .lens-connector-path.abnormal { stroke: #fbbf24; stroke-width: 1.25; opacity: 0.85; }

@keyframes lensChipIn { from { opacity: 0; transform: translate(-50%, -42%) scale(0.96); } }

/* ---- The trust line belongs to capture, not to the report ----------------
   On a read the report carries its own "educational use" notice; the composer's
   line was floating over the report title (phone) and the film (desktop). */
body.mdx.mdx-lens-result #mdxBarLegal { display: none !important; }

/* ---- Wide screens: the report is a side panel; chrome stays on the film --- */
@media (min-width: 900px) {
  body.mdx.mdx-lens-result #lspRail {
    left: calc(var(--lens-area-l, 10px)) !important;
    right: calc(var(--lens-area-r, 10px)) !important;
  }
  body.mdx.mdx-lens-result #mdxLensToolbar {
    left: var(--lens-area-cx, 50%) !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mdx.mdx-lens-result .lens-annotation .lens-overlay-text { animation: none; transition: none; }
}

/* ---- The exploration hint sits above the film, not on its findings -------- */
body.mdx.mdx-lens-result .lens-image-stage.is-fitted .lsp-hint {
  top: auto;
  bottom: calc(100% + 10px);
  line-height: 1.2;
}

/* ---- The bottom nav really leaves on the collapsed/full stops ------------
   It slid down 130% of its own height, which ignores the home-indicator
   inset it rests above: on an iPhone 17 Pro Max ~23pt of it stayed over the
   report. Moved clear of the inset too, and faded. Phone/tablet only — on a
   desktop it is a side column and stays (meddex-experience.css §47). */
@media (max-width: 1023.98px) {
  body.mdx.mdx-lens-result[data-lens-sheet="collapsed"] .bottom-nav.mdx-nav,
  body.mdx.mdx-lens-result[data-lens-sheet="full"] .bottom-nav.mdx-nav {
    transform: translateX(-50%) translateY(calc(100% + 32px + env(safe-area-inset-bottom, 0px)));
    opacity: 0;
  }
}

/* ---- On a read, the composer appears only for a selected region ----------- */
body.mdx.mdx-lens-result:not(.mdx-lens-roi) #mdxBar { display: none !important; }

/* Leaders stay visible on bright film (white lung fields, bone) as well as
   dark: a thin dark halo under the line, no heavier stroke. */
body.mdx.mdx-lens-result .lens-connector-svg { filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.5)); }

/* ---- Docked desktop: one navigation, controls inside the Lens area ---------
   The docked sidebar IS the navigation; an immersive-Lens rule re-showed the
   floating nav column on top of it as an empty dark tile. The back button was
   placed from the window edge, i.e. over the sidebar. */
body.mdx.mdx-docked.lens-immersive .bottom-nav.mdx-nav { display: none !important; }
body.mdx.mdx-docked .mdx-lens-controls.is-left { left: calc(var(--mdx-side-w, 288px) + 12px) !important; }
/* Capture and analysis are a fixed full-window layer; docked, that layer and
   its floating modality pill start after the sidebar like the rest of the
   shell, instead of centring the intro, the film and the scan under it. */
body.mdx.mdx-docked:not(.mdx-lens-result) .lens-screen.lens-v2:not(.lens-fullscreen) {
  left: var(--mdx-side-w, 288px);
  right: 0;
  width: auto;
}
body.mdx.mdx-docked:not(.mdx-lens-result) .lens-screen .lens-modes-wrap {
  left: calc(50% + var(--mdx-side-w, 288px) / 2);
}

/* ---- Analysing: the scan traces the film it is reading -------------------
   The frame used fixed percentages of the whole stage, so on a phone its
   lower corners sat behind the composer and on desktop it framed empty space
   beside the image. Fitted, the corners hug the film and the sweep runs down
   the film only. */
body.mdx .lens-v2 .lens-stage.film-fitted .lens-scan-corner { width: 34px; height: 34px; right: auto; bottom: auto; }
body.mdx .lens-v2 .lens-stage.film-fitted .lens-scan-corner.tl { left: max(4px, calc(var(--lens-film-x) - 12px)); top: calc(var(--lens-film-y) - 12px); }
body.mdx .lens-v2 .lens-stage.film-fitted .lens-scan-corner.tr { left: min(calc(100% - 38px), calc(var(--lens-film-x) + var(--lens-film-w) - 22px)); top: calc(var(--lens-film-y) - 12px); }
body.mdx .lens-v2 .lens-stage.film-fitted .lens-scan-corner.bl { left: max(4px, calc(var(--lens-film-x) - 12px)); top: calc(var(--lens-film-y) + var(--lens-film-h) - 22px); }
body.mdx .lens-v2 .lens-stage.film-fitted .lens-scan-corner.br { left: min(calc(100% - 38px), calc(var(--lens-film-x) + var(--lens-film-w) - 22px)); top: calc(var(--lens-film-y) + var(--lens-film-h) - 22px); }
body.mdx .lens-v2 .lens-stage.film-fitted .lens-scan-sweep {
  left: var(--lens-film-x);
  top: var(--lens-film-y);
  right: auto;
  width: var(--lens-film-w);
  height: var(--lens-film-h);
  background: none;
  box-shadow: none;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  animation: none;
}
body.mdx .lens-v2 .lens-stage.film-fitted .lens-scan-sweep::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 38%;
  top: -38%;
  background: linear-gradient(180deg, rgba(100, 210, 255, 0) 0%, rgba(100, 210, 255, 0.2) 62%, rgba(160, 235, 255, 0.8) 100%);
  border-bottom: 2px solid rgba(180, 240, 255, 0.95);
  animation: mdxFilmSweep 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes mdxFilmSweep { from { top: -38%; } to { top: 100%; } }
body.mdx .lens-v2 .lens-stage.film-fitted .lens-scan-grid {
  -webkit-mask-image: radial-gradient(ellipse calc(var(--lens-film-w) * 0.8) calc(var(--lens-film-h) * 0.8) at var(--lens-film-cx) var(--lens-film-cy), #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse calc(var(--lens-film-w) * 0.8) calc(var(--lens-film-h) * 0.8) at var(--lens-film-cx) var(--lens-film-cy), #000 35%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  body.mdx .lens-v2 .lens-stage.film-fitted .lens-scan-sweep::after { animation: none; top: 42%; opacity: 0.7; }
}
/* A dropped connection is visible on the film itself: the frame turns amber
   while the read retries, and returns to blue when a stage completes. */
body.mdx .lens-v2 .lens-scan.is-retrying .lens-scan-corner {
  border-color: #f59e0b;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}
body.mdx .lens-v2 .lens-scan.is-retrying .lens-scan-sweep::after { animation-play-state: paused; opacity: 0.35; }
/* One status line. The composer already shows the stage with its Cancel
   button; the scan's own pill repeated it underneath (phone: two lines of the
   same text drawn over each other). On a read the composer is hidden, so the
   pill stays there. */
body.mdx:not(.mdx-lens-result) .lens-v2 #lensScanStatus { display: none !important; }

/* ---- Capture: the intro clears the floating modality pill and badge -------
   Centred in the whole stage, the intro's title ran under the "Sign in for 3
   free Lens credits" badge on a 390x844 phone. Auto margins centre it in the
   room below the header and collapse to zero when that room is short. */
body.mdx .mdx-lens-intro {
  justify-content: flex-start;
  padding-top: calc(env(safe-area-inset-top, 0px) + 196px);
}
body.mdx .mdx-lens-intro > :first-child { margin-top: auto; }
body.mdx .mdx-lens-intro > :last-child { margin-bottom: auto; }
/* The modality pill and credits badge sit in a fixed box placed at left:50%
   that the base rule also pins to right:0 — half the window wide, which broke
   the badge onto two lines. Sized to its content it stays one quiet line. */
body.mdx:not(.mdx-lens-result) .lens-screen .lens-modes-wrap {
  right: auto;
  bottom: auto;
  width: max-content;
}
/* Short phones (iPhone SE class): the composer below already carries Upload,
   the shutter and Recent, so the intro keeps its words and lets the composer
   carry the actions instead of stacking a duplicate row into the mode switch. */
@media (max-height: 760px) {
  /* Top-anchored rather than centred: the shell's bottom budget does not
     include the mode switch at this height, so centring ran the heading
     into it. */
  body.mdx .mdx-lens-intro { padding-top: calc(env(safe-area-inset-top, 0px) + 192px); }
  body.mdx .mdx-lens-intro > :first-child { margin-top: 0; }
  body.mdx .mdx-lens-intro-ask { margin-top: 12px; font-size: clamp(1.3rem, 5.6vw, 1.6rem); }
  body.mdx .mdx-lens-intro-actions { display: none; }
}

/* ---- Precise placement: locate → trace → anchor → reveal ------------------
   While the close-crop pass runs (app.js refineLensLocalization) the first-pass
   labels wait quietly and their anchors pulse; when it returns, each structure
   is acquired in reading order — the anchor locks on, a finding's region is
   traced, the leader draws, then the label rises in. ~110 ms apart, once. */
body.mdx.mdx-lens-result .lens-overlay-layer.lens-locating .lens-annotation .lens-overlay-text {
  opacity: 0.4;
  filter: saturate(0.55);
  transition: opacity 0.3s ease;
}
body.mdx.mdx-lens-result .lens-overlay-layer.lens-locating .lens-connector-svg,
body.mdx.mdx-lens-result .lens-overlay-layer.lens-locating .lens-highlight-svg { opacity: 0; transition: opacity 0.3s ease; }
body.mdx.mdx-lens-result .lens-overlay-layer.lens-locating .lens-annotation .lens-anchor {
  animation: lensLocatePulse 1.5s ease-in-out infinite;
}
@keyframes lensLocatePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lens-kind) 55%, transparent); }
  60% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--lens-kind) 0%, transparent); }
}

body.mdx.mdx-lens-result .lens-overlay-layer.lens-reveal .lens-annotation .lens-anchor {
  animation: lensLockOn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--reveal-i, 0) * 110ms);
}
@keyframes lensLockOn {
  0% { transform: scale(3.4); opacity: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--lens-kind) 70%, transparent); }
  55% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
body.mdx.mdx-lens-result .lens-overlay-layer.lens-reveal .lens-highlight-svg .lens-hl {
  stroke-dasharray: 1;
  animation: lensTrace 700ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
  animation-delay: calc(var(--reveal-i, 0) * 110ms + 120ms);
}
@keyframes lensTrace {
  0% { stroke-dashoffset: 1; fill-opacity: 0; }
  70% { fill-opacity: 0; }
  100% { stroke-dashoffset: 0; }
}
body.mdx.mdx-lens-result .lens-overlay-layer.lens-reveal .lens-connector-path {
  stroke-dasharray: 1;
  animation: lensLeaderDraw 360ms ease-out backwards;
  animation-delay: calc(var(--reveal-i, 0) * 110ms + 260ms);
}
@keyframes lensLeaderDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
body.mdx.mdx-lens-result .lens-overlay-layer.lens-reveal .lens-annotation .lens-overlay-text {
  animation: lensChipReveal 360ms cubic-bezier(0.2, 0.9, 0.2, 1) backwards;
  animation-delay: calc(var(--reveal-i, 0) * 110ms + 380ms);
}
@keyframes lensChipReveal {
  from { opacity: 0; transform: translate(-50%, -38%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* Placed precisely: a crisp anchor with a thin ring of the kind's colour. */
body.mdx.mdx-lens-result .lens-annotation.refined .lens-anchor {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lens-kind) 30%, transparent), 0 0 0 6px color-mix(in srgb, var(--lens-kind) 12%, transparent), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* The status of the placement pass, on the film's top edge. */
.lens-locate-pill {
  position: absolute;
  z-index: 40;
  left: calc(var(--lens-film-x, 0px) + var(--lens-film-w, 100%) / 2);
  /* The band above the film (the exploration hint's slot), never on the film
     where it would cover the labels it is reporting on. */
  top: max(8px, calc(var(--lens-film-y, 120px) - 44px));
  transform: translate(-50%, -6px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(92%, 420px);
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  background: rgba(8, 14, 24, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #e6f2ff;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lens-locate-pill.show { opacity: 1; transform: translate(-50%, 0); }
.lens-locate-dot { width: 7px; height: 7px; border-radius: 50%; background: #38bdf8; flex: none; }
.lens-locate-pill.is-busy .lens-locate-dot { animation: lensDotBeat 1s ease-in-out infinite; }
@keyframes lensDotBeat { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }
body:not(.mdx-lens-result) .lens-locate-pill { display: none; }
body.mdx .lens-stage:has(.lens-locate-pill.show) .lsp-hint { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  body.mdx.mdx-lens-result .lens-overlay-layer.lens-locating .lens-annotation .lens-anchor,
  body.mdx.mdx-lens-result .lens-overlay-layer.lens-reveal .lens-annotation .lens-anchor,
  body.mdx.mdx-lens-result .lens-overlay-layer.lens-reveal .lens-highlight-svg .lens-hl,
  body.mdx.mdx-lens-result .lens-overlay-layer.lens-reveal .lens-connector-path,
  body.mdx.mdx-lens-result .lens-overlay-layer.lens-reveal .lens-annotation .lens-overlay-text,
  .lens-locate-pill.is-busy .lens-locate-dot { animation: none; }
}

/* ---- Findings / Anatomy filters (the spatial rail) ------------------------ */
body.mdx .lens-overlay-layer .lens-annotation.filtered { display: none; }
body.mdx .lens-overlay-layer.lsp-hide-findings .lens-highlight-svg { opacity: 0; }

/* A diffuse / bilateral region is outlined, barely tinted. */
body.mdx .lens-highlight-svg .lens-hl.lens-hl-diffuse { fill-opacity: 0.35; stroke-width: 1.25; }

/* ---- Imaging evidence (second review) -------------------------------------
   The signs a finding rests on: numbered dashed boxes on the film while that
   finding is open, and a matching numbered list in its card. Dashed and
   unfilled on purpose: these mark where to look, not a traced boundary. */
.lens-evidence-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.lens-evidence-svg .lens-evidence-box {
  fill: rgba(56, 189, 248, 0.08);
  stroke: #38bdf8;
  stroke-width: 1.75;
  stroke-dasharray: 5 3;
  vector-effect: non-scaling-stroke;
  transition: stroke-width 0.15s ease, fill 0.15s ease;
}
.lens-evidence-svg .lens-evidence-box.is-active { stroke: #e0f2fe; stroke-width: 2.5; fill: rgba(56, 189, 248, 0.18); }
.lens-evidence-tag {
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  padding: 0;
  border: 1.5px solid #0c4a6e;
  border-radius: 999px;
  background: #38bdf8;
  color: #082f49;
  font: 700 12px/21px -apple-system, system-ui, sans-serif;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  transform: var(--lens-label-counter, none);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  -webkit-tap-highlight-color: transparent;
}
/* A 24px dot needs a 44px touch target. */
.lens-evidence-tag::after { content: ""; position: absolute; inset: -10px; }
.lens-evidence-tag.is-active { background: #e0f2fe; }
.lens-overlay-layer.lsp-hide-findings .lens-evidence-svg,
.lens-overlay-layer.lsp-hide-findings .lens-evidence-tag { display: none; }

.lens-evidence { margin: 10px 0; }
.lens-evidence > strong { display: block; margin-bottom: 6px; }
.lens-evidence-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lens-evidence-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.08);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lens-evidence-btn:disabled { cursor: default; border-style: dashed; background: transparent; opacity: 0.8; }
.lens-evidence-btn.is-active { border-color: #38bdf8; background: rgba(56, 189, 248, 0.18); }
.lens-evidence-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 999px;
  background: #38bdf8;
  color: #082f49;
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}
.lens-evidence-btn:disabled .lens-evidence-num { background: rgba(148, 163, 184, 0.45); color: inherit; }
.lens-evidence-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.lens-evidence-btn em { flex: 0 0 auto; font-style: normal; font-size: 0.75rem; opacity: 0.75; white-space: nowrap; }
.lens-evidence-note { margin: 6px 0 0; font-size: 0.75rem; opacity: 0.75; }
.lens-tier-tag.lens-evidence-count { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; }

.lens-review-note { padding: 8px 10px; border-radius: 10px; border-left: 3px solid #94a3b8; background: rgba(148, 163, 184, 0.1); }
.lens-review-note.is-unconfirmed { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
.lens-review-note.is-added { border-left-color: #f43f5e; background: rgba(244, 63, 94, 0.1); }
.lens-review-note.is-uncertain { border-left-color: #facc15; }
@media (prefers-reduced-motion: reduce) {
  .lens-evidence-svg .lens-evidence-box { transition: none; }
}

/* ---- The read on an iPhone: one scroller, nothing floating over it --------
   Measured in WebKit at 375x667, 390x844, 440x956 and 956x440 (22 Oct):
   - the tab bar and the Chat/Lens/Spatial switch floated over the report at
     every stop, leaving ~150px of a half-stop report readable on an SE;
   - a second, 430px scroller (.lens-answer) inside the sheet clipped the
     finding cards, and the sheet's own scroller ran below the screen at the
     collapsed and half stops, so the end of the report could not be reached;
   - in phone landscape the Lens screen was one header taller than the
     display (the page scrolled), the side panel's head sat above the screen
     and the film was squeezed into the half-stop height of a portrait phone.
   The result has its own back button (top left) and actions, so the global
   chrome steps aside while a read is open; it returns on the capture screen. */
@media (max-width: 1023.98px), (max-height: 600px) {
  body.mdx.mdx-lens-result { --mdx-bottom-budget: 0px; }
  body.mdx.mdx-lens-result .bottom-nav.mdx-nav,
  body.mdx.mdx-lens-result .mdx-switch {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* One vertical scroll owner: the sheet's scroller. */
  body.mdx.mdx-lens-result .lens-v2 .lens-sheet .lens-answer {
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
  }
}
@media (max-width: 767.98px) {
  /* The Lens screen sat below the header (main is padded by it) but was a
     full screen tall, so the report's last header-height was always below
     the display. It is now exactly the display below the header, and the
     panel fills it. */
  body.mdx.mdx-lens-result .lens-screen.lens-v2 {
    position: fixed !important;
    top: var(--mdx-topline-h, 56px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  body.mdx.mdx-lens-result .lens-v2 .lens-sheet { top: 0; }
  /* The collapsed peek keeps at least the report's head and first lines on a
     short phone (an SE showed only 115px: the title, no report). app.js reads
     these lengths for drags (lensSnapOffsetPx), so the two cannot disagree. */
  body.mdx.mdx-lens-result .lens-v2 {
    --lens-snap-collapsed: max(0px, min(74dvh, calc(100dvh - var(--mdx-topline-h, 56px) - 210px)));
  }
  body.mdx.mdx-lens-result .lens-v2 .lens-sheet-panel {
    height: 100%;
    max-height: 100%;
  }
  /* The panel rests translated down by its stop inside a clipped sheet, so
     the bottom of its scroller is off-screen by exactly that offset. Padding
     the scroller by the same amount lets the last card scroll into view at
     every stop; drags are untouched. */
  body.mdx.mdx-lens-result .lens-v2 .lens-sheet[data-snap="collapsed"] .lens-sheet-scroll {
    padding-bottom: calc(var(--lens-snap-collapsed) + 28px + env(safe-area-inset-bottom, 0px));
  }
  body.mdx.mdx-lens-result .lens-v2 .lens-sheet[data-snap="medium"] .lens-sheet-scroll {
    padding-bottom: calc(var(--lens-snap-medium) + 28px + env(safe-area-inset-bottom, 0px));
  }
  body.mdx.mdx-lens-result .lens-v2 .lens-sheet[data-snap="full"] .lens-sheet-scroll {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 768px) and (max-height: 600px) {
  /* Exactly the display below the header: no page scroll behind the read. */
  body.mdx.mdx-lens-result .lens-screen.lens-v2 {
    position: fixed !important;
    top: var(--mdx-topline-h, 64px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  body.mdx.mdx-lens-result .lens-v2 .lens-sheet {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    padding: 6px 0 max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
    box-sizing: border-box;
  }
  body.mdx.mdx-lens-result .lens-v2 .lens-sheet-panel {
    height: 100% !important;
    max-height: 100% !important;
    transform: none !important;
  }
  body.mdx.mdx-lens-result .lens-v2 .lens-sheet-scroll { max-height: none !important; }
  /* The film has the whole height beside the panel at every stop. */
  body.mdx.mdx-lens-result[data-lens-sheet] .lens-v2 .lens-stage {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    filter: none !important;
  }
  body.mdx.mdx-lens-result[data-lens-sheet="full"] #lspRail,
  body.mdx.mdx-lens-result[data-lens-sheet="full"] .mdx-ai-fab,
  body.mdx.mdx-lens-result[data-lens-sheet="full"] .mdx-lens-controls { opacity: 1; pointer-events: auto; }
  /* The back button belongs to the film, not on top of the report's head. */
  body.mdx.mdx-lens-result .mdx-lens-controls.is-left { left: calc(min(420px, 38vw) + 12px) !important; }
}
/* The action strip is a flex child between the sheet head and its scroller;
   when the panel is exactly the screen's height it was the one that shrank,
   and the chips were cut in half under the report. */
body.mdx.mdx-lens-result .lens-sheet-panel > .mdx-actions { flex: 0 0 auto; }
body.mdx.mdx-lens-result .lens-sheet-panel > .lens-sheet-head { flex-shrink: 0; }

/* The read-status banner was styled for the old dark sheet: on the white
   report its detail line (what was placed, what the review changed) was
   white text on a pale tint and could not be read. */
body.mdx.mdx-lens-result .lens-sheet-panel .lens-read-status span { color: #33415c; }
body.mdx.mdx-lens-result .lens-sheet-panel .lens-read-status.is-abnormal strong { color: #9a4a00; }
body.mdx.mdx-lens-result .lens-sheet-panel .lens-read-status.is-normal strong { color: #116b32; }
body.mdx.mdx-lens-result .lens-sheet-panel .lens-read-status.is-uncertain strong { color: #845b00; }
body.mdx.mdx-lens-result .lens-sheet-panel .lens-read-status.is-unsupported strong { color: #3f4654; }
body.mdx.mdx-lens-result .lens-sheet-panel .lens-evidence-count { background: rgba(14, 116, 144, 0.12); color: #0e5a70; }
body.mdx.mdx-lens-result .lens-sheet-panel .lens-evidence-btn em { color: #3f4654; opacity: 1; }
body.mdx.mdx-lens-result .lens-sheet-panel .lens-evidence-num { color: #062a3a; }
/* A narrow phone's film sits left of the Baihaqi button; centred on it the
   status pill ran off the left edge. On a phone it is centred on the screen. */
@media (max-width: 767.98px) {
  body.mdx.mdx-lens-result .lens-locate-pill { left: 50%; max-width: calc(100% - 24px); }
}
/* A status line, not a control: it must not swallow a tap on the label
   under it while it is showing. */
.lens-locate-pill { pointer-events: none; }
/* How often Lens missed on this kind of film, under a read that found nothing. */
.lens-read-status .lens-read-measured { display: block; margin-top: 4px; font-size: 0.74rem; opacity: 0.85; }
.lens-conf-layers .lens-conf-observed { margin: 6px 0 0; font-size: 0.74rem; opacity: 0.8; }

/* ---- Independent chest X-ray model (lab feature) ------------------------- */
.lens-specialist { margin: 0 0 14px; padding: 11px 13px; border-radius: 14px; border: 1px solid rgba(14, 116, 144, 0.25); background: rgba(14, 116, 144, 0.06); }
.lens-specialist > strong { display: block; font-size: 0.9rem; }
.lens-specialist-sub { display: block; font-size: 0.72rem; opacity: 0.75; margin-top: 2px; }
.lens-specialist p { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.45; }
.lens-specialist-prompt { padding: 7px 9px; border-radius: 10px; border-left: 3px solid #0e7490; background: rgba(14, 116, 144, 0.08); }
.lens-specialist-prompt.is-check { border-left-color: #b45309; background: rgba(245, 158, 11, 0.1); }
.lens-specialist-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.lens-specialist-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; font-size: 0.8rem; min-height: 28px; }
.lens-specialist-state { font-weight: 600; }
.lens-specialist-row.is-raised .lens-specialist-state { color: #9a4a00; }
.lens-specialist-row.is-low .lens-specialist-state { color: #3f4654; }
.lens-specialist-score { font-variant-numeric: tabular-nums; opacity: 0.8; }
.lens-specialist-note { opacity: 0.75; font-size: 0.72rem !important; }
.lens-specialist-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.01em; vertical-align: 2px; color: #7c4a03; background: rgba(245, 158, 11, 0.16); }
.lens-specialist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 9px; }
.lens-specialist-btn { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #0e7490; background: #0e7490; color: #fff; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.lens-specialist-btn.is-quiet { background: transparent; color: #0e7490; border-color: rgba(14, 116, 144, 0.45); }
.lens-specialist-size { font-size: 0.72rem; opacity: 0.7; }
.lens-specialist-credit { font-size: 0.72rem; color: #0e7490; margin-right: auto; }