.ob-tool.ob-calculator .ob-live-diagram{max-width:100%;margin:0 0 .75rem;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.ob-tool .ob-live-diagram svg{display:block;width:100%;min-width:0;max-width:100%;height:auto;max-height:none}
.ob-live-diagram-empty{padding:16px 0;color:#385a68;background:transparent;font-size:1rem;font-weight:600;line-height:1.5}
.ob-diagram-edit-hint{font-size:.85rem;line-height:1.4;color:#526781;margin:.25rem 0 0}
.ob-tool .ob-live-diagram [data-ob-field][role="button"]{cursor:pointer;fill:#125e82;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ob-tool .ob-live-diagram [data-ob-field][role="button"]:hover{fill:#102a40}
.ob-tool .ob-live-diagram [data-ob-field][role="button"]:focus-visible{outline:2px solid #1765be;outline-offset:3px}
.ob-print-live-diagram svg{display:block;width:100%;max-width:100%;height:auto;margin:auto}
@media print{.ob-print-live-diagram{margin:4mm auto 2mm;max-width:100%;break-inside:avoid;page-break-inside:avoid}.ob-print-live-diagram svg{display:block;width:100%;max-height:78mm}.ob-print-live-diagram figcaption{font-size:7.5pt;color:#394958;margin-top:1mm}.ob-diagram-edit-hint{display:none}}

/* The same SVG viewport is present for valid, incomplete and erroneous data. */
.ob-tool .ob-live-diagram svg.ob-live-svg{aspect-ratio:960 / 440}
.ob-tool .ob-live-diagram .ob-diagram-edit-hint{min-height:2.4em;line-height:1.2;margin:.25rem 0 0}
.ob-tool .ob-live-diagram [data-ob-value-state]{fill:#a31e1e!important;font-weight:700}
.ob-tool .ob-live-diagram [data-ob-value-state]:hover{fill:#7c1818!important}

.ob-tool .ob-live-diagram .ob-diagram-edit-hint{min-height:4.6em;line-height:1.35}
.ob-diagram-edit-hint>span{display:block}
.ob-diagram-method{margin-bottom:.25em}
@media(max-width:560px){
  .ob-tool .ob-live-diagram .ob-dimension-value{font-size:30px}
  .ob-tool[data-formula="wall_vertical_deviation"] .ob-live-diagram .ob-dimension-value,
  .ob-tool[data-formula="window_opening_measurements"] .ob-live-diagram .ob-dimension-value{font-size:20px}
  .ob-tool .ob-live-diagram [data-ob-value-state]{font-size:27px}
  .ob-tool[data-formula="wall_vertical_deviation"] .ob-live-diagram [data-ob-value-state],
  .ob-tool[data-formula="window_opening_measurements"] .ob-live-diagram [data-ob-value-state]{font-size:18px}
}

.ob-diagram-edit-hint>span:last-child{min-height:2.7em}

/* The drawing is fully visible inside the article on a phone. */
.ob-tool .ob-live-diagram .ob-diagram-scroll{width:100%;max-width:100%;min-width:0;overflow:hidden}
.ob-tool .ob-live-diagram .ob-diagram-scroll>svg.ob-live-svg{display:block;width:100%;max-width:100%;height:auto}
.ob-tool .ob-live-diagram .ob-diagram-scroll[data-ob-mobile-layout="panels"] .ob-dimension-value{font-size:20px}
.ob-tool .ob-live-diagram .ob-diagram-scroll[data-ob-mobile-layout="panels"] [data-ob-value-state]{font-size:18px}
.ob-tool .ob-live-diagram .ob-diagram-scroll[data-ob-mobile-layout="roof"] .ob-dimension-value{font-size:18px}
.ob-tool .ob-live-diagram .ob-diagram-scroll[data-ob-mobile-layout="roof"] [data-ob-value-state]{font-size:19px}
.ob-tool .ob-live-diagram .ob-diagram-parameter-hints{display:block;margin:.55rem 0 0;font-size:.84rem;line-height:1.3}
.ob-tool .ob-live-diagram .ob-diagram-parameter-hints>span{display:block;margin-bottom:4px;font-weight:600;color:#425670}
.ob-tool .ob-live-diagram .ob-diagram-parameter-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:6px}
.ob-tool .ob-live-diagram .ob-diagram-parameter-hint{
  display:flex;flex-direction:column;justify-content:center;gap:2px;width:100%;min-width:0;
  border:1px solid #aabecb;border-radius:5px;padding:5px 8px;
  background:#f6fafb;color:#244457;font:inherit;
  text-align:left;white-space:normal;cursor:pointer;
}
.ob-tool .ob-live-diagram .ob-diagram-parameter-name{display:block;font-weight:600;overflow-wrap:anywhere}
.ob-tool .ob-live-diagram .ob-diagram-parameter-status{display:block;line-height:1.25;white-space:nowrap}
.ob-tool .ob-live-diagram .ob-diagram-parameter-hint[data-ob-hint-state="missing"],
.ob-tool .ob-live-diagram .ob-diagram-parameter-hint[data-ob-hint-state="invalid"]{border-color:#d18f8b;background:#fff9f7;color:#9c2525}
.ob-tool .ob-live-diagram .ob-diagram-parameter-hint:hover{background:#eaf2f6}
.ob-tool .ob-live-diagram .ob-diagram-parameter-hint[data-ob-hint-state="missing"]:hover,
.ob-tool .ob-live-diagram .ob-diagram-parameter-hint[data-ob-hint-state="invalid"]:hover{background:#fff1ed}
.ob-tool .ob-live-diagram .ob-diagram-parameter-hint:focus-visible{outline:2px solid #1765be;outline-offset:2px}

/* The eight compact diagrams have measured labels inside their own 360-unit SVG viewBox. */
@media(max-width:560px){
  .ob-tool[data-formula="skirting_cutlist"] .ob-live-diagram .ob-dimension-value,
  .ob-tool[data-formula="deck_board_layout"] .ob-live-diagram .ob-dimension-value,
  .ob-tool[data-formula="ceiling_tile_grid"] .ob-live-diagram .ob-dimension-value,
  .ob-tool[data-formula="parquet_staves_straight"] .ob-live-diagram .ob-dimension-value{font-size:17px}
  .ob-tool[data-formula="skirting_cutlist"] .ob-live-diagram [data-ob-value-state],
  .ob-tool[data-formula="deck_board_layout"] .ob-live-diagram [data-ob-value-state],
  .ob-tool[data-formula="ceiling_tile_grid"] .ob-live-diagram [data-ob-value-state],
  .ob-tool[data-formula="parquet_staves_straight"] .ob-live-diagram [data-ob-value-state]{font-size:17px}
}