/* Step c panels: "Demonstration on a sample". The SVGs come from tools/demo_panels.py. */

.micro { --fig-paper: #faf9f6; --fig-bar: #f1efe9; --fig-line: #cfccc2; --fig-ink: #14161c; aspect-ratio: auto; background: var(--fig-paper); border: 1px solid var(--fig-line); }
@media (prefers-color-scheme: dark) {
  .micro { --fig-paper: #e9e7e0; --fig-bar: #dedbd2; --fig-line: #55574f; }
}
.micro svg.dp { display: block; width: 100%; height: auto; }
.micro .readout {
  position: static; display: block; padding: 8px 10px;
  border-top: 1px solid var(--fig-line); background: var(--fig-bar);
  color: var(--fig-ink); font: 600 12px/1.3 var(--mono);
}
.micro .readout::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: #1f8a5b; }

.dp text { font-family: var(--sans); }
.dp .dp-paper { fill: var(--fig-paper); }
.dp .dp-t { font-size: 7.5px; fill: #565c69; font-variant-numeric: tabular-nums; }
.dp .dp-l { font-size: 8.5px; fill: #2b2f3a; }
.dp .dp-k { font-size: 8px; fill: #14161c; font-weight: 600; letter-spacing: .02em; }
.dp .dp-id { font-size: 5.5px; fill: #ffe08a; fill-opacity: .85; }
.dp .dp-dapi { fill: #24509c; }
.dp .dp-mag { fill: #b4491f; }
.dp .dp-or { fill: #c2381f; }
.dp .dp-hi { fill: #14161c; }
.dp .dp-wh { fill: #ffffff; }
.dp .dp-n1 { fill: #24509c; font-weight: 600; }
.dp .dp-rg { fill: #14161c; font-weight: 700; }

.dp .dp-axis { fill: none; stroke: #2b2f3a; stroke-width: .6; }
.dp .dp-grid { fill: none; stroke: #14161c; stroke-opacity: .09; stroke-width: .5; }
.dp .dp-zero { fill: none; stroke: #14161c; stroke-opacity: .35; stroke-width: .5; }
.dp .dp-cut { fill: none; stroke: #14161c; stroke-width: .7; stroke-dasharray: 3 2.5; }
.dp .dp-otsu { fill: none; stroke: #c2381f; stroke-width: .8; stroke-dasharray: 2 1.5; }
.dp .dp-seg path { fill: none; stroke: #f2a900; stroke-width: .7; stroke-linejoin: round; }
.dp .dp-key-o { fill: none; stroke: #f2a900; stroke-width: 1; }
.dp .dp-seg-c path { stroke: #14161c; stroke-width: .9; }
.dp .dp-cen path { stroke: #ffffff; stroke-width: .5; stroke-opacity: .9; }
.dp .dp-pts { fill: none; stroke-linecap: round; }
.dp .dp-spec { fill: none; stroke: #2b3040; stroke-width: .6; stroke-linejoin: round; }
.dp .dp-win { fill: #24509c; fill-opacity: .1; }
.dp .dp-tr path { fill: none; stroke-width: .55; stroke-opacity: .85; stroke-linejoin: round; }
.dp .dp-mean { fill: none; stroke: #14161c; stroke-width: 1.4; stroke-linejoin: round; }
.dp .dp-lead { fill: none; stroke: #14161c; stroke-width: .5; }
.dp .dp-head { fill: none; stroke: #2b2f3a; stroke-width: .7; }
.dp .dp-sens { stroke: #14161c; stroke-opacity: .6; stroke-width: 1.2; stroke-linecap: round; }
.dp .dp-pick { fill: none; stroke: #14161c; stroke-width: .7; }
.dp image.dp-scan { image-rendering: pixelated; }

@media (max-width: 560px) {
  .micro { margin: 0 -18px; border-left: 0; border-right: 0; }
  .micro .readout { font-size: 11px; }
  .dp .dp-t { font-size: 8.2px; }
  .dp .dp-l { font-size: 9px; }
}

/* Animation: runs when the screen gets "on"; a tab switch restarts it (display none to block). */

.dp .dp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dp .dp-fade { opacity: 0; }
.dp .dp-grow { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.dp .dp-grow-x { transform-origin: 0 50%; transform: scaleX(0); }
.dp .dp-scan { clip-path: inset(0 0 100% 0); }

.on .dp .dp-draw { animation: dp-draw 1.1s cubic-bezier(.4, 0, .2, 1) var(--t, 0s) forwards; }
.on .dp .dp-tr .dp-draw { animation-duration: 1.4s; }
.on .dp .dp-mean { animation-duration: 1.6s; }
.on .dp .dp-fade { animation: dp-fade .7s ease var(--t, 0s) forwards; }
.on .dp .dp-grow { animation: dp-grow .8s cubic-bezier(.2, .7, .2, 1) var(--t, 0s) forwards; }
.on .dp .dp-scan { animation: dp-scan 1.3s linear .1s forwards; }

@keyframes dp-draw { 99% { stroke-dashoffset: 0; } to { stroke-dashoffset: 0; stroke-dasharray: none; } }
@keyframes dp-fade { to { opacity: 1; } }
@keyframes dp-grow { to { transform: none; } }
@keyframes dp-scan { to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .dp .dp-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .dp .dp-fade { opacity: 1; }
  .dp .dp-grow { transform: none; }
  .dp .dp-scan { clip-path: none; }
}