/* Report composition only: controls, type, colours and popover come from the app. */
.report-wrap { max-inline-size: 1440px; margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-8); }
.report-wrap [hidden] { display: none !important; }
.report-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-block: var(--sp-5); }
.report-head h1 { margin-block-end: var(--sp-2); }
.report-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); position: sticky; top: 0; z-index: var(--z-bar); background: var(--paper); padding-block: var(--sp-3); border-block-end: 1px solid var(--line); }
.report-tabs button[aria-selected=true] { color: var(--accent); background: var(--accent-soft); }
.report-section { margin-block-start: var(--sp-5); }
.report-wrap > .report-section:not(.catalog) { max-inline-size: 960px; }
#odr-catalog .catalog-section { scroll-margin-block-start: calc(var(--design-tabs-height, 100px) + var(--tap) + var(--sp-4)); }
#odr-catalog .catalog-shortcut { top: var(--design-tabs-height, 100px); background: var(--paper); }
#catalog-top { scroll-margin-block-start: calc(var(--design-tabs-height, 100px) + var(--sp-4)); }
.report-stack, .report-controls, .report-demo-choices { display: grid; gap: var(--sp-4); }
.report-facts { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); margin-block: var(--sp-4); }
.report-facts dt, .report-caption { color: var(--ink-2); }
.report-facts dd { margin: 0; overflow-wrap: anywhere; }
.report-caption { margin-block: var(--sp-2); }
.report-flow, .report-rule-list { display: grid; gap: var(--sp-2); padding-inline-start: var(--sp-5); margin-block: var(--sp-4); }
.report-section:not(.catalog) details { margin-block: var(--sp-3); }
.report-section:not(.catalog) summary { padding-block: var(--sp-3); cursor: pointer; }
.report-section:not(.catalog) h3 { font-size: var(--fs-block); font-weight: 700; }
.report-section:not(.catalog) code { overflow-wrap: anywhere; font-size: var(--fs-meta); }
.report-wrap .field { min-inline-size: 0; }
.report-wrap select { max-inline-size: 100%; }
.report-demo { padding: var(--sp-5); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sheet); }
.report-demo > .viz-row { margin-block-end: var(--sp-4); }
.viz-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.viz-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-4); margin-block-end: var(--sp-4); }
#odr-property-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
#odr-property-buttons button { inline-size: 100%; min-block-size: 44px; }
.report-pop { inline-size: 280px; }
.report-pop-title { font-weight: 700; }
.report-demo-options { display: grid; gap: var(--sp-2); margin-block: var(--sp-3); }
.report-demo-options .btn { justify-content: flex-start; min-block-size: 44px; white-space: normal; }
.report-pop .viz-row .btn { min-block-size: 44px; }
.report-pop-status:empty { display: none; }
.report-pop-status { margin-block: var(--sp-3); font-size: var(--fs-meta); }
.report-demo-status { block-size: 3em; overflow: auto; font-size: var(--fs-meta); color: var(--ink-2); }
.text-destructive { color: var(--danger); }
.report-stability { margin-block: var(--sp-5); padding-inline-start: var(--sp-4); border-inline-start: 3px solid var(--accent); }
.report-stability p { margin-block: var(--sp-2); }
.report-inventory-row { padding-block: var(--sp-3); border-block-end: 1px solid var(--line); }
.report-inventory-row p { margin-block: var(--sp-2); }
.report-proof { display: block; max-inline-size: 100%; max-block-size: 620px; margin: var(--sp-3) auto; object-fit: contain; }
.report-figure { margin: 0; }
@media (max-width: 600px) {
  .report-wrap { padding-block-start: var(--sp-4); }
  .report-head { margin-block: var(--sp-3); }
  #odr-catalog .catalog-toc { margin-block-end: var(--sp-4); }
  .report-facts { grid-template-columns: 1fr; gap: var(--sp-1); }
  .report-facts dd { margin-block-end: var(--sp-3); }
  .report-demo { padding: var(--sp-4); }
}
