/* Four prebuilt views; all sections remain available when JavaScript is off. */
.demo-workspace { color: var(--color-text-primary); background: var(--color-light); }
.demo-workspace > .container { width: min(1200px, calc(100% - 3rem)); }
.demo-workspace h2 { margin-block-end: .75rem; }
.demo-workspace h3 { font-size: var(--type-card); line-height: var(--leading-card); margin-block-end: 1rem; }
.demo-workspace p, .demo-workspace li, .demo-facts { font-size: var(--type-essential); line-height: var(--leading-essential); }
.demo-workspace p { color: var(--color-text-secondary); }
.demo-workspace p + p { margin-block-start: 1rem; }
.demo-anchor { display: block; }
.demo-fallback { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block-end: 2rem; }
.reporting-demo--enhanced .demo-fallback { display: none; }
.demo-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-block-end: 2rem; }
.demo-tabs button { min-inline-size: 0; min-block-size: 52px; padding: .875rem 1rem; border: 1px solid #CBD5E1; border-radius: 5px; background: var(--color-white); color: var(--color-text-primary); font-size: var(--type-control); line-height: var(--leading-control); font-weight: 700; cursor: pointer; }
.demo-tabs button[aria-selected="true"] { color: var(--color-white); background: var(--color-action); border-color: var(--color-action); }
.demo-tabs button:hover { border-color: var(--color-action); }
.demo-tabs button:focus-visible, .demo-download:focus-visible, .demo-source-reference:focus-visible { outline: 3px solid var(--color-action); outline-offset: 4px; }
.demo-panel { margin-block-end: 2rem; }
.demo-panel__intro { max-inline-size: 74ch; margin-block-end: 1.75rem; }
.demo-source-grid, .demo-indicators, .demo-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.demo-source, .demo-indicator, .demo-findings, .demo-question { min-inline-size: 0; padding: 1.5rem; background: var(--color-white); border: 1px solid #CBD5E1; border-radius: 6px; }
.demo-facts { display: grid; gap: .75rem; margin-block-end: 1.25rem; }
.demo-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: .75rem; border-block-end: 1px solid #E2E8F0; }
.demo-facts dd { font-weight: 700; text-align: end; }
.demo-facts dd span { font-weight: 400; }
.demo-source blockquote { padding: 1rem; margin-block-end: 1rem; color: var(--color-text-primary); background: #EEF3F8; border-inline-start: 3px solid var(--color-action); }
.demo-workspace .demo-note { padding: 1rem 1.25rem; margin-block: 1.25rem; background: #E8EEF8; border-inline-start: 3px solid var(--color-action); color: var(--color-text-primary); }
.demo-source:target, .demo-source:focus { outline: 3px solid var(--color-action); outline-offset: 5px; }
.demo-source-reference { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; margin-inline: .125rem; color: var(--color-action); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; border-radius: 3px; }
.demo-download { display: inline-flex; align-items: center; min-block-size: 44px; padding-block: .5rem; color: var(--color-action); font-size: var(--type-control); line-height: var(--leading-control); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.demo-download:hover, .demo-source-reference:hover, .demo-fallback a { color: var(--color-action-hover); }
.demo-register-preview { margin-block-start: 1rem; border-block-start: 1px solid #CBD5E1; }
.demo-register-preview summary { padding-block: 1rem; cursor: pointer; font-size: var(--type-essential); line-height: var(--leading-essential); font-weight: 700; }
.demo-table-scroll { max-inline-size: 100%; overflow-x: auto; }
.demo-table-scroll table { inline-size: 100%; border-collapse: collapse; font-size: var(--type-essential); line-height: var(--leading-essential); }
.demo-table-scroll caption { text-align: start; margin-block-end: .75rem; color: var(--color-text-secondary); }
.demo-table-scroll :is(th,td) { padding: .75rem .5rem; text-align: start; border-block-end: 1px solid #CBD5E1; }
.demo-workspace .demo-indicator__value { color: var(--color-action); font-size: 2.5rem; line-height: 1.25; font-weight: 700; }
.demo-calculation { direction: ltr; unicode-bidi: isolate; text-align: start; font-weight: 700; }
.demo-workspace .demo-kicker { margin-block-end: .75rem; color: var(--color-action); font-weight: 700; }
.demo-report { max-inline-size: 82ch; padding: 2rem; background: var(--color-white); border: 1px solid #CBD5E1; border-radius: 6px; }
.demo-report section + section { margin-block-start: 1.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid #E2E8F0; }
.demo-findings ul { padding-inline-start: 1.25rem; display: grid; gap: 1.25rem; }
.demo-findings li { color: var(--color-text-secondary); }
.demo-findings strong { color: var(--color-text-primary); }
.demo-question { border-inline-start: 4px solid #946200; background: #FFFBEB; }
.demo-comments { margin-block-start: 2rem; }
.demo-comments ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-block-start: 1.25rem; padding-inline-start: 1.5rem; }
.demo-comments li { padding: 1.25rem; background: #EEF3F8; border-inline-start: 3px solid #94A3B8; }
.demo-comments li p { margin-block-start: .75rem; }
.demo-downloads { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding-block-start: 1.25rem; border-block-start: 1px solid #CBD5E1; }
@media (max-width: 48rem) {
  .demo-workspace > .container { width: calc(100% - 2rem); }
  .demo-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-source-grid, .demo-indicators, .demo-review-grid, .demo-comments ol { grid-template-columns: minmax(0, 1fr); }
  .demo-source, .demo-indicator, .demo-findings, .demo-question, .demo-report { padding: 1.25rem; }
}
@media print {
  .reporting-demo [data-demo-panel][hidden] { display: block !important; }
  .demo-tabs, .demo-downloads { display: none !important; }
}