:root {
  --debug-panel-width: 17.5rem;
}
.layout-debug__canvas { position: fixed; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; border: 0; padding: 0; background: transparent; pointer-events: none; }
.layout-debug { --debug-top: clamp(max(var(--space-sm), env(safe-area-inset-top)), calc(var(--runtime-debug-top, 0px) + var(--space-sm)), calc(100dvh - var(--control-size-md) - var(--space-sm))); position: fixed; inset: var(--debug-top) var(--space-sm) var(--space-sm) auto; margin: 0; border: 0; padding: 0; background: transparent; overflow: auto; display: grid; align-content: start; justify-items: end; gap: var(--space-sm); pointer-events: none; }
.layout-debug__toggle, .layout-debug__parent { display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; min-block-size: var(--control-size-md); padding-inline: var(--space-lg); border-radius: var(--radius-sm); background: var(--color-text); color: var(--color-canvas); font-size: var(--font-size-sm); font-weight: var(--font-weight-lg); box-shadow: inset 0 0 0 var(--line-width) var(--color-outline); }
.layout-debug__toggle, .layout-debug__parent { flex-shrink: 0; }
.app--home .layout-debug { inset-block-start: auto; inset-block-end: calc(var(--bottom-nav-min-height) + env(safe-area-inset-bottom) + var(--space-sm)); max-block-size: calc(100dvh - var(--bottom-nav-min-height) - env(safe-area-inset-bottom) - max(var(--space-sm), env(safe-area-inset-top)) - var(--space-sm)); display: flex; flex-direction: column-reverse; align-items: flex-end; }
.layout-debug__toggle { min-block-size: calc(var(--control-size-md) / 2); padding-inline: var(--space-sm); font-size: var(--font-size-2xs); }
.layout-debug__toggle[aria-pressed='true'] { background: var(--color-accent); color: var(--color-on-accent); }
.layout-debug__info { display: block; inline-size: min(var(--debug-panel-width), calc(100vw - var(--space-lg))); min-block-size: 0; overflow: auto; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-sm); background: var(--color-canvas); color: var(--color-text); box-shadow: inset 0 0 0 var(--line-width) var(--color-outline); font-size: var(--font-size-sm); line-height: var(--line-height-md); white-space: pre-line; overflow-wrap: anywhere; }

.layout-debug::backdrop, .layout-debug__canvas::backdrop { background: transparent; pointer-events: none; }