/* Fixed app canvas. Only record lists, secondary cards and export sheets scroll. */
html.m011-host, .m011-host body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
.m011-host #app { position: fixed; inset: var(--visible-top, 0px) 0 auto; height: var(--visible-height, 100dvh); overflow: hidden; }
.m011-preview { width: 100%; max-width: 880px; height: 100%; padding: 0; display: flex; flex-direction: column; }
.m011-preview .preview-notice { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 430px; gap: 8px; margin: 0 auto; padding: max(2px, env(safe-area-inset-top, 0px)) 12px 2px; }
.m011-preview .preview-notice__title { margin: 0; font-size: .75rem; }
.m011-preview .preview-notice .demo-button { border: 0; background: transparent; padding: 8px; }
.m011-preview .preview-stage { position: relative; flex: 1 1 0; min-height: 0; display: flex; gap: 0; }
.m011-preview .demo-panel { position: absolute; z-index: 950; top: 0; right: max(12px, calc((100% - 430px) / 2)); width: min(360px, calc(100% - 24px)); max-height: calc(100% - 12px); margin: 0; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 12px 32px rgb(24 35 45 / 18%); }
.page-viewport[data-fixed] { height: 100%; min-height: 0; overflow: hidden; container-type: size; }
[data-fixed] .home-shell, [data-fixed] .observation-shell, [data-fixed] .export-shell { height: 100%; min-height: 0; overflow: hidden; border-radius: 0; outline: none; }
[data-fixed] .home-shell { padding: 12px 0 max(8px, env(safe-area-inset-bottom, 0px)); }
[data-fixed] .home-form { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
[data-fixed] .home-form > * { flex: 0 0 auto; }
[data-fixed] .home-form .kdl-brand__title { margin-top: 16px; }
[data-fixed] .kdl-start { margin-top: clamp(12px, 3cqh, 28px); }
[data-fixed] .kdl-start__ring { width: 144px; height: 144px; padding: 8px; }
[data-fixed] .kdl-start__button { width: 128px; height: 128px; }
[data-fixed] .home-fields { margin-top: clamp(16px, 4cqh, 36px); gap: 12px; }
[data-fixed] .home-footer { flex: 0 0 auto; margin: 0; padding: 8px 16px 0; }
[data-fixed] .home-shell[data-density='compact'] .kdl-brand__logo { height: 44px; }
[data-fixed] .home-shell[data-density='compact'] .kdl-brand__subtitle { display: none; }
[data-fixed] .home-shell[data-density='compact'] .kdl-brand__title { margin-top: 4px; }
[data-fixed] .home-shell[data-density='compact'] .kdl-start__ring { width: 104px; height: 104px; }
[data-fixed] .home-shell[data-density='compact'] .kdl-start__button { width: 88px; height: 88px; }
[data-fixed] .home-shell[data-density='tight'] .home-form > .kdl-brand,
[data-fixed] .home-shell[data-density='tight'] .home-footer { display: none; }
[data-fixed] .home-shell[data-density='tight'] .kdl-start { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 16px 12px; }
[data-fixed] .home-shell[data-density='tight'] .kdl-start__ring { width: 88px; height: 88px; margin: 0; flex: 0 0 88px; }
[data-fixed] .home-shell[data-density='tight'] .kdl-start__button { width: 72px; height: 72px; font-size: max(24px, 1rem); }
[data-fixed] .home-shell[data-density='tight'] .kdl-start__caption { margin: 0; }
[data-fixed] .home-shell[data-density='tight'] .home-fields { margin-top: 0; gap: 8px; }
[data-fixed] .home-shell[data-density='tight'] .kdl-field__input { padding-block: 10px; }
[data-fixed] .observation-shell { padding: 12px 16px max(4px, env(safe-area-inset-bottom, 0px)); }
[data-fixed] .obs-header, [data-fixed] .obs-summary, [data-fixed] .obs-recorder, [data-fixed] .obs-footer { flex: 0 0 auto; }
[data-fixed] .obs-records { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; touch-action: pan-y; padding: var(--record-gutter-top, 16px) 12px var(--record-gutter-bottom, 24px); margin-inline: -12px; scrollbar-width: thin; scroll-padding-block: 16px; }
[data-fixed] .obs-records > * { flex: 0 0 auto; }
/* Touches on a short card (or at a long card's edge) must reach the record list. */
[data-fixed] .obs-record-content, [data-fixed] .obs-pending-content { max-height: var(--record-content-height, none); overflow-y: auto; overscroll-behavior-y: auto; touch-action: auto; scrollbar-width: thin; }
[data-fixed] .obs-empty { margin-block: auto; padding-block: 16px; }
[data-fixed] .obs-recorder { margin: 8px -16px 0; padding: 20px 16px 0; }
[data-fixed] .obs-record-button { min-height: max(64px, calc(1.125rem * var(--kdl-line) + 22px)); }
[data-fixed] .obs-recording-label { position: absolute; top: 0; left: 16px; right: 16px; margin: 0; font-size: .75rem; }
[data-fixed] .obs-recorder[data-recording='true'] .obs-wave { transform: none; }
[data-fixed] .obs-footer { margin-top: 0; }
[data-fixed] .export-shell { display: flex; flex-direction: column; }
[data-fixed] .export-ended { flex: 0 0 auto; padding: 16px; }
[data-fixed] .export-ended__hero { padding-top: 24px; }
[data-fixed] .export-shell[data-panel-open='true'] .export-ended { padding-bottom: 12px; }
[data-fixed] .export-shell[data-panel-open='true'] .export-ended__hero { padding-top: 12px; }
[data-fixed] .export-shell[data-panel-open='true'] .export-context { display: none; }
[data-fixed] .export-panel { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
[data-fixed] .export-new-class { margin-top: 12px; }
@container (max-height: 540px) {
  [data-fixed] .obs-summary { margin-block: 6px; }
  [data-fixed] .obs-context { margin-bottom: 4px; }
  [data-fixed] .obs-recorder { margin-top: 0; }
  [data-fixed] .export-shell[data-panel-open='true'] .export-ended .kdl-brand { display: none; }
  [data-fixed] .export-shell[data-panel-open='true'] .export-ended__hero { padding-top: 0; }
}

/* Short landscape screens use their available width while retaining one
   independently scrolling record list and the same recording controls. */
@media (orientation: landscape) and (max-height: 480px) and (min-width: 640px) {
  .page-viewport[data-fixed] { max-width: 880px; }
  [data-fixed] .observation-shell { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .65fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 24px; }
  [data-fixed] .obs-header, [data-fixed] .obs-summary { grid-column: 1 / -1; }
  [data-fixed] .obs-header { grid-row: 1; }
  [data-fixed] .obs-summary { grid-row: 2; }
  [data-fixed] .obs-records { grid-column: 1; grid-row: 3 / 5; height: 100%; margin: 0; }
  [data-fixed] .obs-recorder { grid-column: 2; grid-row: 3; margin: 0; padding-inline: 0; align-self: end; }
  [data-fixed] .obs-footer { grid-column: 2; grid-row: 4; }
}