/* Full screen uses the existing page and theme, with the graph toolbar retained. */
.canvas-caption { top: 9px; left: 12px; z-index: 6; max-width: calc(100% - 196px); height: 30px; gap: 7px; white-space: nowrap; }
.canvas-caption .canvas-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.canvas-caption #node-count { flex-shrink: 0; }
.graph-stage { container: atlas-graph / inline-size; }
@container atlas-graph (max-width: 420px) {
  .canvas-caption .caption-sep,
  .canvas-caption #node-count { display: none; }
}
@container atlas-graph (max-width: 300px) {
  .canvas-caption { display: none; }
}
.graph-view-controls { position: absolute; top: 9px; right: 12px; z-index: 7; display: flex; align-items: center; gap: 8px; }
.graph-view-controls .graph-view-tabs { position: static; }
.graph-fullscreen-toggle { position: relative; display: inline-grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; padding: 0; border: 1px solid var(--atlas-border); border-radius: 50%; background: var(--atlas-card); color: var(--atlas-muted); }
.graph-fullscreen-toggle::before { position: absolute; inset: -4px; border-radius: inherit; content: ""; }
@media (max-width: 820px) { .graph-view-controls { top: 8px; right: 8px; } }
.graph-fullscreen-toggle:hover { border-color: var(--atlas-muted); color: var(--atlas-foreground); background: color-mix(in srgb, var(--atlas-card), var(--atlas-foreground) 5%); }
.graph-fullscreen-toggle[aria-pressed="true"] { color: var(--atlas-foreground); border-color: color-mix(in srgb, var(--atlas-border), var(--atlas-accent) 34%); background: color-mix(in srgb, var(--atlas-card), var(--atlas-accent) 10%); }
.graph-fullscreen-toggle .ui-icon { width: 13px; height: 13px; stroke-width: 1.4; }
.graph-fullscreen-toggle .fullscreen-exit-icon { display: none; }
.graph-fullscreen-toggle[aria-pressed="true"] .fullscreen-enter-icon { display: none; }
.graph-fullscreen-toggle[aria-pressed="true"] .fullscreen-exit-icon { display: block; }

html.graph-fullscreen,
html.graph-fullscreen body { height: 100%; overflow: hidden; }
html.graph-fullscreen { scrollbar-gutter: auto; }
.graph-fullscreen .app-shell { display: grid; grid-template-columns: minmax(0, 1fr); height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.graph-fullscreen .main-area { grid-column: 1; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.graph-fullscreen .sidebar,
.graph-fullscreen .sidebar-backdrop,
.graph-fullscreen .topbar,
.graph-fullscreen .page-heading,
.graph-fullscreen .statusbar,
.graph-fullscreen .inspector-resize,
.graph-fullscreen .local-map-tip { display: none; }

.graph-fullscreen .toolbar { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px 8px; min-height: 0; padding: 10px 12px; align-items: center; }
.graph-fullscreen .toolbar .search-field { order: 0; flex: 1 1 140px; min-width: 100px; width: auto; max-width: 280px; }
.graph-fullscreen .toolbar .toolbar-divider,
.graph-fullscreen .toolbar .toolbar-spacer { display: none; }
.graph-fullscreen .toolbar .toolbar-button,
.graph-fullscreen .toolbar .edit-history-controls { order: 1; }
.graph-fullscreen .toolbar .filter-group { order: 3; flex: 0 0 100%; min-width: 0; max-width: 100%; flex-wrap: nowrap; }
.graph-fullscreen .graph-workspace { flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; min-height: 0; padding: 0 12px 12px; overflow: hidden; }
.graph-fullscreen .graph-stage { height: 100%; min-height: 0; border-radius: 16px; }

/* Selection details float above the graph without taking a grid column. */
.graph-fullscreen .graph-workspace { position: relative; }
.graph-fullscreen .inspector { position: absolute; display: flex; top: 52px; right: 22px; bottom: 64px; z-index: 12; width: min(360px, calc(100% - 44px)); height: auto; min-height: 0; max-height: none; border-radius: 18px; box-shadow: 0 16px 32px rgb(0 0 0 / .18); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(calc(100% + 24px)); transition: transform 220ms cubic-bezier(.22, .8, .25, 1), opacity 160ms ease, width 200ms ease, visibility 0s linear 220ms; }
.graph-fullscreen.graph-inspector-open .inspector { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
.graph-fullscreen.graph-inspector-wide .inspector { width: min(640px, calc(100% - 44px)); }
@media (prefers-reduced-motion: reduce) {
  .graph-fullscreen .inspector { transition: none; }
}

@media (max-height: 480px) {
  .graph-fullscreen .toolbar { padding-block: 6px; }
  .graph-fullscreen .graph-workspace { padding-bottom: 6px; }
}

@media (max-width: 560px) {
  .graph-fullscreen .canvas-caption { white-space: nowrap; }
  .graph-fullscreen .canvas-caption .caption-sep,
  .graph-fullscreen .canvas-caption #node-count { display: none; }
}

/* Temporary names keep this motion scoped to the graph expand/collapse action. */
.graph-fullscreen-transition #graph-stage { view-transition-name: atlas-graph; }
.graph-fullscreen-transition .toolbar { view-transition-name: atlas-graph-toolbar; }
.graph-fullscreen-transition #graph-fullscreen { view-transition-name: atlas-graph-toggle; }
.graph-fullscreen-transition .sidebar { view-transition-name: atlas-graph-sidebar; }
.graph-fullscreen-transition .page-heading { view-transition-name: atlas-graph-heading; }
.graph-fullscreen-transition .topbar { view-transition-name: atlas-graph-topbar; }
.graph-fullscreen-transition #inspector { view-transition-name: atlas-graph-inspector; }
.graph-fullscreen-transition::view-transition-group(*) { animation-duration: 380ms; animation-timing-function: cubic-bezier(.22, .8, .25, 1); }
.graph-fullscreen-transition::view-transition-old(atlas-graph-sidebar) { animation: graph-panel-left-out 260ms ease both; }
.graph-fullscreen-transition::view-transition-new(atlas-graph-sidebar) { animation: graph-panel-left-in 320ms ease both; }
.graph-fullscreen-transition::view-transition-old(atlas-graph-inspector) { animation: graph-panel-right-out 260ms ease both; }
.graph-fullscreen-transition::view-transition-new(atlas-graph-inspector) { animation: graph-panel-right-in 320ms ease both; }
.graph-fullscreen-transition::view-transition-old(atlas-graph-heading),
.graph-fullscreen-transition::view-transition-old(atlas-graph-topbar) { animation: graph-panel-up-out 220ms ease both; }
.graph-fullscreen-transition::view-transition-new(atlas-graph-heading),
.graph-fullscreen-transition::view-transition-new(atlas-graph-topbar) { animation: graph-panel-up-in 320ms ease both; }
@keyframes graph-panel-left-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes graph-panel-left-in { from { opacity: 0; transform: translateX(-24px); } }
@keyframes graph-panel-right-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes graph-panel-right-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes graph-panel-up-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes graph-panel-up-in { from { opacity: 0; transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .graph-fullscreen-transition::view-transition-group(*),
  .graph-fullscreen-transition::view-transition-old(*),
  .graph-fullscreen-transition::view-transition-new(*) { animation-duration: 0.01ms; }
}