/* Use the space beneath the page header; short viewports may scroll instead of clipping controls. */
.schema-page .main { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; }
.schema-page .content { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 0; width: 100%; max-width: none; margin: 0; padding: var(--space-5); }
.schema-page .schema-workspace { display: flex; flex-direction: column; flex: 1 0 auto; min-width: 0; min-height: 0; }
.schema-page .main > .topbar, .schema-page .schema-toolbar, .schema-page .schema-help, .schema-page .schema-legend { flex: none; }
.schema-page .schema-find, .schema-page .schema-controls { min-width: 0; max-width: 100%; }
.schema-page .schema-toolbar .button { max-width: 100%; white-space: normal; line-height: 1.4; text-align: center; }
.schema-page .schema-help, .schema-page .schema-legend { overflow-wrap: anywhere; }
.schema-page .schema-body { flex: 1 1 0; min-height: min(20rem, 40dvh); grid-template-columns: min(16rem, 45%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.schema-page .schema-sidebar { min-height: 0; height: auto; max-height: none; overflow: auto; }
.schema-page .schema-canvas { min-width: 0; min-height: 0; height: 100%; }
.schema-page .schema-workspace.is-sidebar-hidden .schema-body { grid-template-columns: minmax(0, 1fr); }
.schema-page .schema-workspace.is-expanded { min-height: 0; overflow: auto; }
.schema-page .schema-workspace.is-expanded .schema-body { min-height: min(20rem, 40dvh); }

/* Keep the card action reachable by keyboard and touch as well as hover. */
.schema-related-control { overflow: visible; opacity: 0; pointer-events: none; }
.schema-node:hover + .schema-related-control, .schema-node:focus + .schema-related-control,
.schema-related-control:hover, .schema-related-control:focus-within, .schema-related-control.is-active { opacity: 1; pointer-events: auto; }
.schema-related-toggle { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 8px; border: var(--border); border-radius: 6px; color: var(--muted); background: var(--paper); box-shadow: var(--popup-shadow); }
.schema-related-toggle:hover, .schema-related-toggle[aria-pressed=true] { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }
.schema-related-toggle > svg { display: block; width: 20px; height: 20px; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none), (pointer: coarse) { .schema-related-control { opacity: 1; pointer-events: auto; } }