/* SplitLayout variant toggle (shell concern) */
.splitlayout-right.right-pane--current-only .splitlayout-right-bottom { display: block; }
.splitlayout-right.right-pane--with-recent .splitlayout-right-bottom { display: block; }
/* SplitLayout base container */
.splitlayout-root { position: relative; display: block; height: 100vh; width: 100vw; overflow: hidden; }
/* Use minmax(0,1fr) to allow children with overflow to scroll (avoid implicit min-content sizing traps) */
.splitlayout-body { display: grid; grid-template-rows: minmax(0, 1fr); height: 100vh; grid-template-areas: "left gutter right"; }
/* The first column width (left panel) and gutter width are applied dynamically by updating inline CSS variables elsewhere (future task). */
.splitlayout-body { grid-template-columns: var(--pfse-left-width, 360px) var(--pfse-gutter-width, 8px) 1fr; }

/* Left pane */
.splitlayout-left { display: flex; flex-direction: column; min-width: 360px; max-width: 50vw; border-right: 1px solid var(--pfse-border-primary); background: var(--pfse-surface-secondary); min-height: 0; grid-area: left; }
.splitlayout-left-header { padding: var(--pfse-spacing-3); border-bottom: 1px solid var(--pfse-border-primary); }
.splitlayout-left-header.toolbar { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--pfse-spacing-2); }
.splitlayout-left-header .toggle-group { margin-left: 0; }
.splitlayout-left-header .image-size-group { margin-left: 0; }
.splitlayout-theme-toggle .input--select { min-width: 110px; }
.splitlayout-left-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--pfse-spacing-3); box-sizing: border-box; }
.splitlayout-dock-handle { display: none; align-items: center; justify-content: space-between; gap: var(--pfse-spacing-2); padding: var(--pfse-spacing-2) var(--pfse-spacing-3); border-bottom: 1px solid var(--pfse-border-primary); background: var(--pfse-surface-secondary); }
.splitlayout-dock-toggle {
  border: 1px solid var(--pfse-border-primary);
  background: var(--pfse-surface-primary);
  color: var(--pfse-text-high);
  border-radius: var(--pfse-radius-md);
  padding: var(--pfse-spacing-1) var(--pfse-spacing-2);
  cursor: pointer;
  transition:
    background var(--pfse-anim-standard) var(--pfse-ease-standard),
    border-color var(--pfse-anim-standard) var(--pfse-ease-standard),
    color var(--pfse-anim-micro) var(--pfse-ease-standard),
    box-shadow var(--pfse-anim-standard) var(--pfse-ease-standard),
    outline var(--pfse-anim-instant) var(--pfse-ease-standard),
    transform var(--pfse-anim-standard) var(--pfse-ease-standard);
}
.splitlayout-dock-toggle:focus { outline: var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color); outline-offset: 1px; }
.splitlayout-left.dock-closed .splitlayout-left-scroll { display: none; }
.splitlayout-left.dock-closed .splitlayout-left-header { border-bottom: none; }
.splitlayout-left.dock-closed { border-top: none; min-width: 0; width: 0; max-width: 0; padding: 0; border-right: none; }

.splitlayout-hide-btn {
  border: 1px solid var(--pfse-border-primary);
  background: var(--pfse-surface-primary);
  color: var(--pfse-text-high);
  border-radius: var(--pfse-radius-md);
  padding: var(--pfse-spacing-1) var(--pfse-spacing-2);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--pfse-anim-standard) var(--pfse-ease-standard),
    border-color var(--pfse-anim-standard) var(--pfse-ease-standard),
    color var(--pfse-anim-micro) var(--pfse-ease-standard),
    box-shadow var(--pfse-anim-standard) var(--pfse-ease-standard),
    outline var(--pfse-anim-instant) var(--pfse-ease-standard),
    transform var(--pfse-anim-standard) var(--pfse-ease-standard);
}
.splitlayout-hide-btn:focus { outline: var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color); outline-offset: 1px; }

.splitlayout-show-tab {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  border: 1px solid var(--pfse-border-primary);
  background: var(--pfse-surface-primary);
  color: var(--pfse-text-high);
  border-radius: var(--pfse-radius-md);
  padding: var(--pfse-spacing-2) var(--pfse-spacing-3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  cursor: pointer;
  transition:
    background var(--pfse-anim-standard) var(--pfse-ease-standard),
    border-color var(--pfse-anim-standard) var(--pfse-ease-standard),
    color var(--pfse-anim-micro) var(--pfse-ease-standard),
    box-shadow var(--pfse-anim-standard) var(--pfse-ease-standard),
    outline var(--pfse-anim-instant) var(--pfse-ease-standard),
    transform var(--pfse-anim-standard) var(--pfse-ease-standard);
}
.splitlayout-show-tab:focus { outline: var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color); outline-offset: 1px; }

/* Gutter */
.splitlayout-gutter { width: var(--pfse-gutter-width, 8px); cursor: col-resize; background: var(--pfse-border-secondary); grid-area: gutter; }
.splitlayout-gutter:hover { background: color-mix(in srgb, var(--pfse-border-secondary) 70%, var(--pfse-text-high) 30%); }
.splitlayout-gutter:focus { outline: var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color); outline-offset: -2px; }

/* Right pane */
.splitlayout-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; grid-area: right; }
.splitlayout-right-top { flex: 1 1 auto; padding: var(--pfse-spacing-2); min-height: 0; }
.splitlayout-right-bottom { flex: 0 0 auto; padding: var(--pfse-spacing-2); border-top: 1px solid var(--pfse-border-secondary); overflow: auto; }

/* Variant toggle control removed */

/* Responsive: bottom dock on narrow viewports */
@media (max-width: 900px) {
  .splitlayout-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; grid-template-areas: "right" "left"; }
  .splitlayout-left { min-width: 100%; max-width: none; border-right: none; border-top: 1px solid var(--pfse-border-primary); }
  .splitlayout-left-scroll { max-height: 60vh; }
  .splitlayout-gutter { display: none; }
  .splitlayout-dock-handle { display: flex; }
  .splitlayout-show-tab { left: auto; right: 12px; top: auto; bottom: 12px; transform: none; }
}