/* expand-pane.css — tier 2 layout.
 * Owns: click-to-expand pane headers and the resize handles. */

/* Carried from the old expand-pane.css header: click-to-expand pane headers (Army / Units / Details).
 * Mounted by js/app/expand-pane.js. Desktop only (>820px); on mobile the
 * single-pane mobile layout already gives one panel the full screen. */

/* ── Resize Handles */
.resize-handle { background: var(--border); cursor: col-resize; transition: background 0.15s; z-index: 10; flex-shrink: 0; }
.resize-handle:hover, .resize-handle.dragging { background: var(--accent); }

@media (min-width: 821px) {
  .app-main.pane-expanded-center > .resize-handle, .app-main.pane-expanded-build > .resize-handle { opacity: 0; pointer-events: none; transition: opacity 0.18s ease; }
  .panel-expand-btn {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: var(--sp-2);
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.2s;
  }
  .panel-expand-btn:hover { color: var(--accent); border-color: var(--border-light); background: var(--ov-1); }
  .panel-expanded > .panel-header .panel-expand-btn, .panel-build-focus > .panel-header .panel-expand-btn { color: var(--accent); }
  .panel-expand-btn .expand-icon-collapse { display: none; }
  .panel-expanded > .panel-header .panel-expand-btn .expand-icon-expand, .panel-build-focus > .panel-header .panel-expand-btn .expand-icon-expand { display: none; }
  .panel-expanded > .panel-header .panel-expand-btn .expand-icon-collapse, .panel-build-focus > .panel-header .panel-expand-btn .expand-icon-collapse { display: inline; }
  .panel-left.panel-expanded .points-summary-shadow { display: none !important; }
}

@media (min-width: 821px) and (max-width: 860px) {
  /* Drag-resizing and pane-expanding make no sense in a single column. */
  body #app-main.app-main > .resize-handle, body #app-main.app-main .panel-expand-btn { display: none !important; }
}