/* Demo controls stay in document flow; neither state covers patient content. */
#demo-mode-bar[data-compact-demo], #patient-preview-bar[data-compact-demo] {
  position: static; inset: auto; z-index: auto; display: block;
  padding: 8px 16px; box-shadow: none; width: 100%;
}
#demo-mode-bar.hidden, #patient-preview-bar.hidden { display: none; }
.demo-toolbar-summary { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.demo-toolbar-summary .demo-bar-left { margin-right: auto; min-width: 0; flex-wrap: wrap; }
.demo-toolbar-summary .demo-bar-dot { animation: none; flex-shrink: 0; }
[data-compact-demo] .demo-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
[data-compact-demo] .demo-tools[hidden] { display: none !important; }
[data-compact-demo] .demo-bar-btn { min-height: 36px; }
#demo-case-modal select option { padding: 7px 9px; white-space: normal; }
#demo-case-modal button:disabled { opacity: .5; cursor: not-allowed; }
#demo-case-modal :focus-visible, [data-compact-demo] :focus-visible { outline: 3px solid #ffd36d; outline-offset: 2px; }
@media(max-width: 600px) {
  #demo-mode-bar[data-compact-demo], #patient-preview-bar[data-compact-demo] { padding: 6px 10px; }
  #demo-bar-clinic-name { display: none; }
  #demo-case-modal { padding: 8px !important; }
  #demo-case-modal > div { padding: 16px !important; max-height: calc(100dvh - 16px) !important; }
  #demo-case-modal input, #demo-case-modal select { font-size: 16px; }
  #demo-case-procedure { height: 148px; }
}