/* Large-screen responsive layer for molecules/.
   Keep selectors scoped to body.molecule-editor-page. */

body.molecule-editor-page {
  --molecule-large-screen-css-loaded: 1;
  --molecule-topbar-height: var(--molecule-large-topbar-height);
  --molecule-large-editor-max-width: 1920px;
  --molecule-ultra-editor-max-width: 2160px;
  --molecule-large-canvas-max-width: 1440px;
  --molecule-large-canvas-max-height: 1000px;
  --molecule-large-panel-width: 320px;
  --molecule-large-right-panel-width: 280px;
  --molecule-large-gap: clamp(14px, 1vw, 24px);
  --molecule-large-topbar-height: 58px;
}

body.molecule-editor-page #graphCanvas {
  min-width: 0;
}

@media (min-width: 1440px) {
  body.molecule-editor-page .topbar-btn,
  body.molecule-editor-page #toolbar :is(.tool-button-grid > button, .history-button-row > button, .preset-catalog-open, .template-catalog-open),
  body.molecule-editor-page .preset-btn,
  body.molecule-editor-page .history-button-row button,
  body.molecule-editor-page .camera-button-grid .hud-btn,
  body.molecule-editor-page .shortcut-key,
  body.molecule-editor-page .json-modal-actions button,
  body.molecule-editor-page .signature-modal-actions button,
  body.molecule-editor-page .export-modal-actions button,
  body.molecule-editor-page .tutorial-actions button,
  body.molecule-editor-page .legend-item,
  body.molecule-editor-page .bond-order-menu button {
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  body.molecule-editor-page .molecule-formula,
  body.molecule-editor-page .molecule-weight-row,
  body.molecule-editor-page #status,
  body.molecule-editor-page .tutorial-card p,
  body.molecule-editor-page .json-modal textarea,
  body.molecule-editor-page .signature-modal input,
  body.molecule-editor-page .export-modal input {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (min-width: 1920px) {
  body.molecule-editor-page {
    grid-template-columns:
      minmax(24px, 1fr)
      var(--molecule-large-panel-width)
      minmax(880px, var(--molecule-large-canvas-max-width))
      var(--molecule-large-right-panel-width)
      minmax(24px, 1fr);
    grid-template-rows: var(--molecule-large-topbar-height) minmax(0, 1fr);
    grid-template-areas:
      "topbar topbar topbar topbar topbar"
      ". left canvas right .";
    column-gap: 0;
    overflow: hidden;
  }

  body.molecule-editor-page .molecule-topbar {
    display: grid;
    grid-template-columns:
      minmax(24px, 1fr)
      minmax(0, calc(var(--molecule-large-editor-max-width) - 48px))
      minmax(24px, 1fr);
    padding: 0;
  }

  body.molecule-editor-page .molecule-topbar > * {
    grid-row: 1;
  }

  body.molecule-editor-page .topbar-brand {
    grid-column: 2;
    align-self: center;
    justify-self: start;
    width: 220px;
  }

  body.molecule-editor-page .topbar-menu-bar {
    grid-column: 2;
    align-self: center;
    justify-self: center;
  }

  body.molecule-editor-page .topbar-status-strip {
    grid-column: 2;
    align-self: center;
    justify-self: end;
  }

  body.molecule-editor-page .topbar-app-title {
    grid-column: 2;
    align-self: center;
    justify-self: end;
  }

  body.molecule-editor-page .left-panel,
  body.molecule-editor-page .right-panel,
  body.molecule-editor-page #graphCanvas {
    max-height: var(--molecule-large-canvas-max-height);
    align-self: center;
  }

  body.molecule-editor-page .left-panel,
  body.molecule-editor-page .right-panel {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.molecule-editor-page .left-panel {
    border-left: 1px solid rgba(56, 189, 248, 0.14);
  }

  body.molecule-editor-page .right-panel {
    border-right: 1px solid rgba(56, 189, 248, 0.14);
  }

  body.molecule-editor-page #graphCanvas {
    width: 100%;
    height: min(calc(100dvh - var(--molecule-large-topbar-height)), var(--molecule-large-canvas-max-height));
    border-inline: 1px solid rgba(56, 189, 248, 0.16);
  }

  body.molecule-editor-page.panel-left-collapsed {
    grid-template-columns:
      minmax(24px, 1fr)
      0
      minmax(880px, var(--molecule-large-canvas-max-width))
      var(--molecule-large-right-panel-width)
      minmax(24px, 1fr);
  }

  body.molecule-editor-page.panel-right-collapsed {
    grid-template-columns:
      minmax(24px, 1fr)
      var(--molecule-large-panel-width)
      minmax(880px, var(--molecule-large-canvas-max-width))
      0
      minmax(24px, 1fr);
  }

  body.molecule-editor-page.panel-left-collapsed.panel-right-collapsed {
    grid-template-columns:
      minmax(24px, 1fr)
      0
      minmax(880px, var(--molecule-large-canvas-max-width))
      0
      minmax(24px, 1fr);
  }

  body.molecule-editor-page .panel-collapse-toggle.left {
    left: max(8px, calc((100vw - var(--molecule-large-editor-max-width)) / 2 + var(--molecule-large-panel-width) - (var(--molecule-panel-handle-width) / 2)));
  }

  body.molecule-editor-page.panel-left-collapsed .panel-collapse-toggle.left {
    left: max(8px, calc((100vw - var(--molecule-large-editor-max-width)) / 2 + 8px));
  }

  body.molecule-editor-page .panel-collapse-toggle.right {
    right: max(8px, calc((100vw - var(--molecule-large-editor-max-width)) / 2 + var(--molecule-large-right-panel-width) - (var(--molecule-panel-handle-width) / 2)));
  }

  body.molecule-editor-page.panel-right-collapsed .panel-collapse-toggle.right {
    right: max(8px, calc((100vw - var(--molecule-large-editor-max-width)) / 2 + 8px));
  }
}

@media (min-width: 2560px) {
  body.molecule-editor-page {
    grid-template-columns:
      minmax(48px, 1fr)
      var(--molecule-large-panel-width)
      minmax(920px, var(--molecule-large-canvas-max-width))
      var(--molecule-large-right-panel-width)
      minmax(48px, 1fr);
  }

  body.molecule-editor-page .molecule-topbar {
    grid-template-columns:
      minmax(48px, 1fr)
      minmax(0, calc(var(--molecule-ultra-editor-max-width) - 96px))
      minmax(48px, 1fr);
  }

  body.molecule-editor-page.panel-left-collapsed {
    grid-template-columns:
      minmax(48px, 1fr)
      0
      minmax(920px, var(--molecule-large-canvas-max-width))
      var(--molecule-large-right-panel-width)
      minmax(48px, 1fr);
  }

  body.molecule-editor-page.panel-right-collapsed {
    grid-template-columns:
      minmax(48px, 1fr)
      var(--molecule-large-panel-width)
      minmax(920px, var(--molecule-large-canvas-max-width))
      0
      minmax(48px, 1fr);
  }

  body.molecule-editor-page.panel-left-collapsed.panel-right-collapsed {
    grid-template-columns:
      minmax(48px, 1fr)
      0
      minmax(920px, var(--molecule-large-canvas-max-width))
      0
      minmax(48px, 1fr);
  }

  body.molecule-editor-page .panel-collapse-toggle.left {
    left: max(8px, calc((100vw - var(--molecule-ultra-editor-max-width)) / 2 + var(--molecule-large-panel-width) - (var(--molecule-panel-handle-width) / 2)));
  }

  body.molecule-editor-page.panel-left-collapsed .panel-collapse-toggle.left {
    left: max(8px, calc((100vw - var(--molecule-ultra-editor-max-width)) / 2 + 8px));
  }

  body.molecule-editor-page .panel-collapse-toggle.right {
    right: max(8px, calc((100vw - var(--molecule-ultra-editor-max-width)) / 2 + var(--molecule-large-right-panel-width) - (var(--molecule-panel-handle-width) / 2)));
  }

  body.molecule-editor-page.panel-right-collapsed .panel-collapse-toggle.right {
    right: max(8px, calc((100vw - var(--molecule-ultra-editor-max-width)) / 2 + 8px));
  }
}

@media (min-width: 3840px) {
  body.molecule-editor-page {
    grid-template-columns:
      minmax(80px, 1fr)
      var(--molecule-large-panel-width)
      minmax(960px, var(--molecule-large-canvas-max-width))
      var(--molecule-large-right-panel-width)
      minmax(80px, 1fr);
  }

  body.molecule-editor-page.panel-left-collapsed {
    grid-template-columns:
      minmax(80px, 1fr)
      0
      minmax(960px, var(--molecule-large-canvas-max-width))
      var(--molecule-large-right-panel-width)
      minmax(80px, 1fr);
  }

  body.molecule-editor-page.panel-right-collapsed {
    grid-template-columns:
      minmax(80px, 1fr)
      var(--molecule-large-panel-width)
      minmax(960px, var(--molecule-large-canvas-max-width))
      0
      minmax(80px, 1fr);
  }

  body.molecule-editor-page.panel-left-collapsed.panel-right-collapsed {
    grid-template-columns:
      minmax(80px, 1fr)
      0
      minmax(960px, var(--molecule-large-canvas-max-width))
      0
      minmax(80px, 1fr);
  }

  body.molecule-editor-page::before,
  body.molecule-editor-page::after {
    content: "";
    grid-row: 2;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(56, 189, 248, 0.05), transparent 45%),
      radial-gradient(circle at center, rgba(234, 179, 8, 0.05), transparent 45%);
  }

  body.molecule-editor-page::before {
    grid-column: 1;
  }

  body.molecule-editor-page::after {
    grid-column: 5;
    transform: scaleX(-1);
  }
}

@media (min-width: 1440px) and (max-height: 700px) {
  body.molecule-editor-page {
    grid-template-rows: 50px minmax(0, 1fr);
  }

  body.molecule-editor-page .molecule-topbar {
    height: 50px;
  }

  body.molecule-editor-page .topbar-btn {
    min-height: 36px;
    height: 36px;
  }

  body.molecule-editor-page .molecule-panel {
    padding: clamp(10px, 1vw, 14px);
    overflow-y: auto;
  }

  body.molecule-editor-page .tool-panel-header {
    margin-bottom: 10px;
  }

  body.molecule-editor-page #toolbar h2 {
    margin-bottom: 10px;
    font-size: 19px;
  }

  body.molecule-editor-page #toolbar h2::after {
    display: none;
  }

  body.molecule-editor-page .tool-section,
  body.molecule-editor-page .panel-section {
    margin-bottom: 10px;
    padding: 12px;
  }

  body.molecule-editor-page .tool-section-title,
  body.molecule-editor-page .panel-kicker {
    margin-bottom: 7px;
  }

  body.molecule-editor-page .panel-section h3 {
    margin-bottom: 10px;
    font-size: 20px;
  }

  body.molecule-editor-page .atom-picker-button {
    min-height: 56px;
  }

  body.molecule-editor-page #toolbar :is(.tool-button-grid > button, .history-button-row > button, .preset-catalog-open, .template-catalog-open),
  body.molecule-editor-page .preset-btn,
  body.molecule-editor-page .history-button-row button,
  body.molecule-editor-page .camera-button-grid .hud-btn,
  body.molecule-editor-page .shortcut-key {
    min-height: 38px;
  }

  body.molecule-editor-page .molecule-formula-card {
    padding: 14px;
  }

  body.molecule-editor-page .molecule-formula {
    overflow-wrap: anywhere;
    font-size: clamp(26px, 2.4vw, 38px);
    line-height: 1.1;
    letter-spacing: 0;
  }

  body.molecule-editor-page .json-modal,
  body.molecule-editor-page .signature-modal,
  body.molecule-editor-page .export-modal,
  body.molecule-editor-page .periodic-modal {
    padding: 14px;
    align-items: start;
    overflow-y: auto;
  }

  body.molecule-editor-page .json-modal-panel,
  body.molecule-editor-page .signature-modal-panel,
  body.molecule-editor-page .export-modal-panel,
  body.molecule-editor-page .periodic-panel {
    max-height: calc(100dvh - 28px);
    overflow: auto;
  }

  body.molecule-editor-page .json-modal textarea {
    min-height: 260px;
    max-height: 48dvh;
  }

  body.molecule-editor-page .periodic-grid {
    grid-template-rows: repeat(9, minmax(54px, 60px));
  }

  body.molecule-editor-page .tutorial-card {
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
  }

  body.molecule-editor-page .bond-order-menu {
    max-width: calc(100vw - 28px);
  }

  body.molecule-editor-page .graph-canvas-toast {
    max-width: min(560px, calc(100vw - 28px));
  }
}