/*
 * Workspaces on the Markets page (Phase 17, PMD-UI-016 and PMD-UI-017):
 * the Layout menu, the grid of panel frames, the stacked fallback for a
 * narrow window, and the pop-out window's page. Tokens only, so the light
 * and dark themes both follow. Rows are 40px (js/pm-workspaces.js ROW_PX).
 */

/* The Layout menu, on the Markets page's bar. */
.pmws-layout-slot { display: inline-flex; }
.pmws-layout { position: relative; display: inline-flex; }
.pmws-layout-btn { white-space: nowrap; }
.pmws-dirty { color: var(--color-warning); }
.pmws-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: var(--z-nav);
  min-width: 220px;
  padding: var(--space-1) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-bg) 60%, transparent);
}
.pmws-menu[hidden] { display: none; }
.pmws-menu button {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
}
.pmws-menu button:hover,
.pmws-menu button:focus-visible { background: var(--color-surface-raised); outline: none; }
.pmws-menu button[aria-disabled="true"] { color: var(--color-text-muted); cursor: default; opacity: 0.6; }
.pmws-menu [role="menuitemradio"]::before { content: ""; display: inline-block; width: 1.2em; }
.pmws-menu [role="menuitemradio"][aria-checked="true"]::before { content: "\2713"; color: var(--color-accent); }
.pmws-menu-sep { height: 1px; margin: var(--space-1) 0; background: var(--color-border); }

/* The page and its grid. */
.pmws-page { display: flex; flex-direction: column; gap: var(--space-3); }
.pmws-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pmws-root { position: relative; }
.pmws-grid { display: grid; gap: var(--space-2); }
.pmws-empty { margin: var(--space-4) 0; }

.pmws-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.pmws-frame[data-dragging] {
  z-index: 2;
  border-color: var(--color-accent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-bg) 50%, transparent);
  opacity: 0.92;
}
.pmws-frame-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.pmws-frame-head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.pmws-frame[data-dragging] .pmws-frame-head { cursor: grabbing; }
.pmws-frame-title {
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pmws-frame-tools { display: inline-flex; flex-shrink: 0; gap: var(--space-1); }
.pmws-tool {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  text-decoration: none;
  cursor: pointer;
}
.pmws-tool:hover { border-color: var(--color-accent); }
.pmws-frame-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-2); }
/* A whole page inside a frame: its own heading smaller, its own height free. */
.pmws-frame-body .pm-page { min-height: 0; height: auto; }
.pmws-frame-body h1 { font-size: var(--font-size-lg); margin: 0 0 var(--space-2); }
.pmws-frame-body pm-live-table { --pm-lt-height: 100%; min-height: 160px; }

.pmws-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: linear-gradient(135deg, transparent 50%, var(--color-text-muted) 50%);
  cursor: nwse-resize;
  touch-action: none;
  opacity: 0.6;
}
.pmws-resize:hover,
.pmws-resize:focus-visible { opacity: 1; outline: none; }

.pmws-placeholder,
.pmws-missing,
.pmws-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
}
.pmws-placeholder p,
.pmws-missing p,
.pmws-card p { margin: 0; }
.pmws-missing { border-color: var(--color-warning); background: var(--color-warning-bg); }

/* Narrower than the grid's minimum: the panels stack in reading order. */
.pmws[data-stacked] .pmws-grid { display: flex; flex-direction: column; }
.pmws[data-stacked] .pmws-frame { min-height: 320px; }
.pmws[data-stacked] .pmws-frame-head { cursor: default; }

/* The add-a-panel dialog. */
.pmws-field { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-2); font-size: var(--font-size-sm); }
.pmws-field select,
.pmws-field input {
  min-height: 34px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}
.pmws-field[hidden] { display: none; }
.pmws-hint { margin: 0; font-size: var(--font-size-xs); }

/* The pop-out window: only the panel, no menu. */
body[data-popout] app-nav { display: none; }
body[data-popout] app-shell { padding-left: 0; }
body[data-popout] .app-main-content { max-width: none; padding: var(--space-3); }
.pmws-popout { display: flex; flex-direction: column; gap: var(--space-2); min-height: calc(100vh - 2 * var(--space-3)); }
.pmws-popout-head h1 { margin: 0; font-size: var(--font-size-xl); }
.pmws-popout-head p { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); }
.pmws-popout-body { flex: 1; min-height: 0; }
.pmws-popout-body pm-live-table { --pm-lt-height: calc(100vh - 160px); }