/* Source photograph and study overlay are independent. Marker dimensions stay
   in CSS pixels while the photograph and its coordinates zoom together. */
.histology-demo {
  --histo-gold: var(--accent, #d4b47e);
  --histo-wall: var(--stage-bottom, #1d2227);
  margin-top: 48px;
  color: var(--text);
  isolation: isolate;
}
.histology-demo button,
.histology-demo input { font: inherit; }
.histology-demo button { -webkit-tap-highlight-color: transparent; }
.histology-demo button:focus-visible,
.histology-demo input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; }
.histology-demo .histo-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 28px;
  margin-bottom: 16px;
}
.histology-demo .histo-instruction {
  margin: 0;
  color: var(--text-2);
  font: 400 15px/1.5 var(--sans);
}
.histology-demo .histo-tools { display: flex; align-items: center; gap: 20px; }
.histology-demo .histo-zoom { display: flex; align-items: center; gap: 10px; font: 400 14px/1.3 var(--sans); }
.histology-demo .histo-zoom input {
  width: clamp(82px, 10vw, 132px);
  height: 30px;
  margin: 0;
  padding: 0;
  accent-color: var(--histo-gold);
  cursor: ew-resize;
}
.histology-demo .histo-zoom output { min-width: 3.4ch; color: var(--text); font-variant-numeric: tabular-nums; }
.histology-demo .histo-reset {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 400 14px/1.3 var(--sans);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.histology-demo .histo-reset:hover { color: var(--accent-2); }
.histology-demo .histo-reset:disabled { color: var(--text-3); text-decoration: none; cursor: default; }
.histology-demo .histo-stage { position: relative; min-width: 0; }
.histology-demo .histo-viewport {
  position: relative;
  width: min(calc(100% - clamp(0px, calc((100vw - 650px) * .45), 360px)), calc(72svh * 1280 / 958));
  margin-inline: auto;
  aspect-ratio: 1280 / 958;
  overflow: hidden;
  background: var(--sunken);
  box-shadow: var(--shadow-print);
}
.histology-demo .histo-image-plane { position: absolute; inset: 0; transform-origin: 0 0; }
.histology-demo .histo-image-plane img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  filter: none;
  opacity: 1;
  user-select: none;
  -webkit-user-drag: none;
}
.histology-demo .histo-pin {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.histology-demo .histo-marker {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.3px solid var(--histo-gold);
  border-radius: 9px;
  background: var(--histo-wall);
  color: var(--histo-gold);
  font: 500 10px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.histology-demo .histo-pin.is-active { z-index: 5; }
.histology-demo .histo-pin.is-active .histo-marker {
  background: var(--histo-gold);
  color: var(--on-accent, #231b0d);
}
.histology-demo .histo-leaders {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.histology-demo .histo-leaders path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.histology-demo .histo-leader-case { stroke: var(--histo-wall); stroke-width: 3.5px; }
.histology-demo .histo-leader-line { stroke: var(--accent-2, #e3caa0); stroke-width: 1.25px; }
.histology-demo .histo-caption {
  position: absolute;
  z-index: 4;
  width: max-content;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 5px 8px;
  transform: translateY(-50%);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 400 15px/1.3 var(--sans);
  text-wrap: balance;
  overflow-wrap: normal;
  pointer-events: none;
}
.histology-demo .histo-key {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 6px 28px;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
.histology-demo .histo-key li { display: flex; min-width: 0; padding: 0; margin: 0; }
.histology-demo .histo-key-button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  text-align: left;
  font: 400 15px/1.35 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}
.histology-demo .histo-key-number {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.3px solid var(--histo-gold);
  border-radius: 9px;
  color: var(--histo-gold);
  font-size: 10px;
  font-weight: 500;
}
.histology-demo .histo-key-button.is-active { color: var(--text); }
.histology-demo .histo-key-button.is-active .histo-key-number { color: var(--on-accent); background: var(--histo-gold); }
.histology-demo .histo-key-button:hover { color: var(--accent-2); }
.histology-demo .wall-label { max-width: 690px; margin: 28px 0 0; }
.histology-demo .wall-label .wl-detail { padding-top: 0; border-top: 0; }
.histology-demo .histo-error { margin-top: 16px; color: var(--text); font: 400 15px/1.6 var(--sans); }
.histology-demo [hidden] { display: none !important; }
.histology-demo:not(.is-ready) .histo-pin { visibility: hidden; }
.histology-demo:not(.is-ready) .histo-tools { visibility: hidden; }
@media (max-width: 1050px) {
  .histology-demo .histo-key { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .histology-demo { margin-top: 32px; }
  .histology-demo .histo-toolbar { margin-bottom: 12px; }
  .histology-demo .histo-tools { width: 100%; justify-content: space-between; gap: 16px; }
  .histology-demo .histo-instruction { font-size: 14px; }
  .histology-demo .histo-zoom,
  .histology-demo .histo-reset { font-size: 14px; }
  .histology-demo .histo-zoom input { width: 110px; }
  .histology-demo .histo-key { gap: 4px 16px; margin-top: 14px; }
  .histology-demo .histo-key li { flex: 1 1 calc(50% - 16px); }
  .histology-demo .histo-key-button { font-size: 14px; }
  .histology-demo .wall-label { margin-top: 24px; }
}

.histology-demo .histo-caption[data-side="left"] { text-align:right; }
.histology-demo .histo-caption[data-placement="photo"] { color:#fff; text-shadow:0 1px 3px #17131a,0 -1px 2px #17131a,1px 0 2px #17131a,-1px 0 2px #17131a; }