/* Mobile chart owns its fixed header and scrolling viewport.
   chart-content.css owns the shared, normally flowing chart. */
#view-chart-tool {
  --chart-toolbar-bottom: 0px;
  --chart-lib-topbar: calc(var(--chart-toolbar-top) + var(--chart-toolbar-size));
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  color: var(--chart-ink);
  background: var(--chart-page);
  font-variant-numeric: tabular-nums;
  color-scheme: light;
}
/* Reclaim 8px toolbar bottom space and 6px identity padding; icon centers stay fixed. */
#view-chart-tool .chart-sheet .mr-who { min-height: 58px; padding-top: 0; }
#view-chart-tool .mr-stage {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  position: relative;
  width: min(var(--chart-available-width, 100%), var(--chart-reading-width, 430px));
  height: 100%;
  margin-inline: auto;
  min-height: 0;
  background: var(--chart-page);
  isolation: isolate;
}
#view-chart-tool .mr-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--chart-background, none) center top / 100% auto repeat-y;
  opacity: var(--chart-background-opacity, .18);
  pointer-events: none;
}
#view-chart-tool .mr-ops {
  position: relative;
  flex: 0 0 var(--chart-lib-topbar);
  height: var(--chart-lib-topbar);
  z-index: 2;
}
#view-chart-tool .mr-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
#view-chart-tool .mr-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 max(13px, var(--chart-safe-right)) max(16px, var(--chart-safe-bottom)) max(13px, var(--chart-safe-left));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
/* The controller removes only surplus trailing space; the accepted origin stays fixed. */
#view-chart-tool .mr-scroll[data-chart-fit] {
  max-height: var(--chart-visible-height, none);
  padding-bottom: var(--chart-fit-padding, max(16px, var(--chart-safe-bottom)));
}
#view-chart-tool .mr-scroll[data-chart-fit="fit"] {
  overflow-y: hidden;
  overscroll-behavior-y: none;
  touch-action: pan-x pinch-zoom;
}
/* Accepted refinement: 18px down plus 2px down = 20px net content offset. */
#view-chart-tool .mr-scroll > .chart-sheet { margin-top: 20px; }
/* Accepted top-info sizing; retain the avatar slot, horizontal axis and bottom baseline. */
#view-chart-tool .chart-sheet .mr-cal { font-size: var(--chart-info-font, 14px); }
#view-chart-tool .chart-sheet .chart-gan::before { transform: scale(.72); transform-origin: 50% 100%; }
#view-chart-tool button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* No page scaling or inaccessible clipping: unusually short windows scroll
   this chart panel, while the input and library retain their own policies. */
@media print {
  html:has(body[data-view="chart-tool"]),
  body[data-view="chart-tool"],
  body[data-view="chart-tool"] .shell,
  body[data-view="chart-tool"] #main {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #view-chart-tool { position: static; height: auto; overflow: visible; }
  #view-chart-tool .mr-stage { height: auto; }
  #view-chart-tool .mr-scroll, #view-chart-tool .mr-scroll[data-chart-fit] { max-height: none; overflow: visible; }
  #view-chart-tool :is(.mr-back, .mr-edit) { visibility: hidden; }
}