/* Keep totals visible and frame each real deck shape tightly on phones. */
@media screen and (max-width: 800px) {
  #cost-calculator .canvas {
    display: flex;
    flex-direction: column;
  }

  #cost-calculator .canvas > .summary {
    order: -1;
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }

  #cost-calculator .canvas > .svgbox {
    aspect-ratio: var(--cost-diagram-aspect, 760 / 430);
    min-height: 0;
    overflow: hidden;
    padding: 8px;
  }

  #cost-calculator .canvas > .svgbox > svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}