/* Interactive visualizations for "When to Transplant: Value Iteration and Optimal Stopping".
   Self-contained, theme-aware (reads the Stack theme's data-scheme). */

/* Keep wide KaTeX display equations from overflowing the viewport on narrow screens. */
.main-article .katex-display { overflow-x: auto; overflow-y: hidden; }

.mdpviz {
  --mdpviz-wait:   #3b7df0;   /* action: wait          */
  --mdpviz-trans:  #16a085;   /* action: transplant    */
  --mdpviz-alert:  #e0553e;   /* emphasis              */
  --mdpviz-absorb: #9aa4b0;   /* absorbing states      */

  margin: 2.2em 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--card-separator-color, rgba(128,128,128,0.25));
  border-radius: 12px;
  background: var(--card-background, #fff);
  color: var(--card-text-color-main, #111);
  box-shadow: var(--shadow-l1, 0 1px 3px rgba(0,0,0,0.08));
  font-size: 1.4rem;
  line-height: 1.5;
}

.mdpviz__title {
  font-weight: 700;
  font-size: 1.1em;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.mdpviz__sub {
  margin: 0 0 14px;
  color: var(--card-text-color-secondary, #666);
  font-size: 0.92em;
}

.mdpviz__canvas-wrap { position: relative; width: 100%; }
.mdpviz canvas { display: block; width: 100%; height: auto; touch-action: none; }

.mdpviz__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  margin-top: 14px;
}
.mdpviz__control { display: flex; flex-direction: column; gap: 4px; min-width: 190px; flex: 1 1 210px; }
.mdpviz__control label {
  font-size: 0.82em;
  color: var(--card-text-color-secondary, #666);
  display: flex; justify-content: space-between; gap: 10px;
}
.mdpviz__control label b { color: var(--card-text-color-main, #111); font-variant-numeric: tabular-nums; }

.mdpviz input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 4px;
  background: var(--card-separator-color, #d8d8d8);
  outline: none; margin: 6px 0;
}
.mdpviz input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--mdpviz-wait); cursor: pointer;
  border: 2px solid var(--card-background, #fff);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.mdpviz input[type=range]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--mdpviz-wait); cursor: pointer; border: 2px solid var(--card-background,#fff);
}

.mdpviz__buttons { display: flex; gap: 8px; flex: 0 0 auto; }
.mdpviz__btn {
  font: inherit; font-size: 0.86em; font-weight: 600;
  padding: 6px 14px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--card-separator-color, #ccc);
  background: var(--card-background-selected, #eee);
  color: var(--card-text-color-main, #111);
}
.mdpviz__btn:hover { border-color: var(--mdpviz-wait); }
.mdpviz__btn:active { transform: translateY(1px); }
.mdpviz__btn:disabled { opacity: 0.4; cursor: default; transform: none; }

.mdpviz__odds {
  margin: 10px 0 0;
  font-size: 0.9em;
  color: var(--card-text-color-main, #111);
}
.mdpviz__odds b { font-weight: 700; }

.mdpviz__readout {
  display: grid; gap: 8px 18px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.mdpviz__stat {
  padding: 9px 11px; border-radius: 8px;
  background: var(--blockquote-background-color, rgba(128,128,128,0.08));
}
.mdpviz__stat .k { font-size: 0.76em; color: var(--card-text-color-secondary, #666); display:block; }
.mdpviz__stat .v { font-size: 1.16em; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing:-0.01em; }

.mdpviz__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 2px 0 12px; font-size: 0.86em; }
.mdpviz__legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--card-text-color-secondary,#666); }
.mdpviz__legend span::before {
  content: ""; width: 15px; height: 3px; border-radius: 2px; background: currentColor;
}
.mdpviz__legend .l-wait::before   { background: var(--mdpviz-wait); }
.mdpviz__legend .l-trans::before  { background: var(--mdpviz-trans); }
.mdpviz__legend .l-absorb::before { background: var(--mdpviz-absorb); }

.mdpviz__note { margin: 12px 0 0; font-size: 0.9em; color: var(--card-text-color-secondary, #666); }
.mdpviz__note b { color: var(--card-text-color-main, #111); }

@media (max-width: 520px) {
  .mdpviz { font-size: 1.3rem; padding: 14px; }
  .mdpviz__control { min-width: 100%; }
}

/* Inline SVG schematic of the Markov decision process */
.mdp-fig {
  margin: 1.9em auto;
  text-align: center;
  color: var(--card-text-color-main, #111);
}
.mdp-fig svg { width: 100%; max-width: 520px; height: auto; overflow: visible; }
.mdp-fig .node { fill: var(--card-background, #fff); stroke: currentColor; stroke-width: 1.6; }
.mdp-fig .node-absorb { fill: var(--blockquote-background-color, rgba(128,128,128,0.10)); stroke: var(--mdpviz-absorb, #9aa4b0); }
.mdp-fig .edge { stroke: var(--card-text-color-secondary, #888); fill: none; stroke-width: 1.2; opacity: 0.7; }
.mdp-fig .edge-t { stroke: var(--mdpviz-trans, #16a085); fill: none; stroke-width: 1.7; opacity: 0.9; }
.mdp-fig #mdp-ah path { fill: var(--card-text-color-secondary, #888); }
.mdp-fig #mdp-ah-t path { fill: var(--mdpviz-trans, #16a085); }
.mdp-fig text { fill: currentColor; font-family: var(--sys-font-family), sans-serif; font-size: 13px; }
.mdp-fig .lbl-dim { fill: var(--card-text-color-secondary, #888); font-size: 11px; }
.mdp-fig figcaption {
  margin: 8px auto 0;
  max-width: 480px;
  font-size: 0.86em;
  line-height: 1.5;
  color: var(--card-text-color-secondary, #666);
}