/* Middle column: stacked Template / Test data panels with header strips,
   case tabs, shared chips/buttons, history overlay shell */

#main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); position: relative; }

/* container-type so the header can adapt to the PANEL's width (reacts to the
   middle/right splitter AND to opening the assistant), not the viewport */
.panel { display: flex; flex-direction: column; min-height: 0; container-type: inline-size; }
#panelTpl { flex: 1 1 0; }
#panelData { flex: none; height: var(--data-h, 240px); }

/* collapse: the panel shrinks to its header strip */
#main.tpl-collapsed #panelTpl { flex: none; }
#main.tpl-collapsed #panelTpl .editor { display: none; }
#main.tpl-collapsed:not(.data-collapsed) #panelData { flex: 1 1 0; height: auto; }
#main.data-collapsed #panelData { height: auto; }
#main.data-collapsed #panelData .editor { display: none; }
#main.tpl-collapsed #tplCollapse svg { transform: rotate(180deg); }
#main.data-collapsed #dataCollapse svg { transform: rotate(180deg); }

.panel-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  min-width: 0;
}
/* hard clip on the TEMPLATE editor header: its content never spills past the panel onto the
   neighbour. The adaptive cascade (short engine → title ellipsis → icons into ⋯) shrinks it
   first; this is the backstop so anything still too wide is cut at the panel edge. Scoped to
   #panelTpl so the DATA header's variant dropdown (an absolutely-positioned .dd-pop child of
   its header) isn't clipped when open. */
#panelTpl .panel-head { overflow: hidden; }
.panel-title {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap; flex: none;
}
/* template panel: "<TYPE> · <name>" — the type keeps the small uppercase label
   look; the name is the readable, non-uppercased identity. The whole title may
   shrink + ellipsis so a long name never pushes the action icons off the strip. */
/* the title holds its full width by default (flex 0 0 auto) so steps 1-2 (Run label,
   engine) give up width BEFORE the name does; only at step-3 is it allowed to shrink,
   ellipsising down to a 70px floor (never vanishes — full text stays in the tooltip). */
#tplTitle { flex: 0 0 auto; min-width: 70px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.panel-head.step-3 #tplTitle { flex: 0 1 auto; }
#tplTitle .pt-name {
  text-transform: none; letter-spacing: normal; font-size: 12px; color: var(--ink);
}
#tplTitle .pt-name::before { content: " · "; color: var(--faint); }
/* engine version: a compact, unobtrusive select next to Run — the engine the run
   compiles with (a property of the template version). Subtle until hovered/focused,
   like .run-act, so it reads as a header control, not a form field. */
.engine-sel {
  flex: none; appearance: none; -webkit-appearance: none;
  border: 1px solid transparent; background: none; border-radius: 6px; cursor: pointer;
  padding: 2px 18px 2px 7px; font: inherit; font-size: 11px; font-weight: 550;
  color: var(--muted); white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1 2.5 4 5.5 7 2.5' stroke='%23888' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 5px center;
}
.engine-sel:hover { background-color: var(--sel); color: var(--ink); }
.engine-sel:focus-visible { outline: none; border-color: var(--accent); color: var(--ink); }
/* legacy is highlighted (it's the non-default, "old engine" choice) */
.engine-sel.is-legacy { color: var(--warn); }
.panel-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
.panel-actions .icon-btn { width: 24px; height: 24px; font-size: 14px; }
.pa-sys { display: contents; }      /* a grouping wrapper only — lays out like its children */
.pa-more { display: none; }         /* overflow trigger: shown only at step 4 */

/* ── adaptive header — a deterministic, MEASURED priority cascade (fitTplHeader in
   panels.js applies these classes one at a time, in order, only as far as needed to
   make the strip fit). Driven by real content width, not px breakpoints, so controls
   don't oscillate ("jump") near a threshold. Preview moved to the results pane, so the
   editor header's order is:
     step-2  shrink the engine select to its short value (Auto(Core/Legacy)/Core/Legacy)
     step-3  the title ellipsises harder (down to a 70px floor)
     step-4  fold the system icons into the ⋯ overflow menu                       */
/* step-2: the engine select switches to SHORT captions (Auto(Core/Legacy)/Core/Legacy)
   in renderEngineSel — it sizes to that compact text, no max-width clamp needed */
/* step-3 title-shrink is enabled by the #tplTitle rule above (flex 0 1 auto, min 70px) */
.panel-head.step-4 .pa-sys { display: none; }
.panel-head.step-4 .pa-more { display: inline-flex; }
/* data header: the variant picker is the wide element — let it shrink (ellipsise) so it
   gives up width before the icons fold into ⋯, mirroring the template title's behaviour */
#panelData .panel-head #variantDD { min-width: 0; flex: 0 1 auto; overflow: hidden; }
#panelData .panel-head #variantDD .dd-btn { max-width: 100%; min-width: 0; }

/* the ⋯ overflow popup (action menu) — reuses the dd-pop look; positioned under
   the button by overflow.js. Each row is an action that proxies the hidden icon. */
.pa-pop {
  position: absolute; z-index: 60; min-width: 168px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.pa-pop .pa-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 9px; border-radius: 6px; font-size: 12.5px; color: var(--ink);
  background: none; border: 0; cursor: pointer; text-align: left; white-space: nowrap;
}
.pa-pop .pa-row:hover { background: var(--sel); }
.pa-pop .pa-row[disabled] { opacity: .4; cursor: default; }
.pa-pop .pa-row[disabled]:hover { background: none; }
.pa-pop .pa-row svg { flex: none; opacity: .85; }
.collapse-btn svg { transition: transform .12s; }
.icon-btn[disabled] { opacity: .35; cursor: default; }
.icon-btn[disabled]:hover { background: none; color: var(--muted); }

/* "modified" warning badge in panel headers */
.mod-badge {
  flex: none;
  font-size: 10.5px; font-style: italic; font-weight: 550;
  color: var(--warn);
}

/* the data-set combo box has to fit the 32px header strip */
.panel-head .dd-btn { padding: 2px 8px; font-size: 11.5px; max-width: 210px; }

/* no-template state: the welcome hero covers everything right of the
   sidebar (editor, preview and assistant columns) */
#emptyState {
  position: fixed; top: 0; right: 0; bottom: 0; left: var(--side-w);
  z-index: 80;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 48px 32px;
  transition: left .22s ease;   /* follows the sidebar collapse animation */
}

/* history overlay covers the whole middle column */
#histOverlay {
  position: absolute; inset: 0; z-index: 20;
  background: var(--surface);
  display: flex; flex-direction: column;
}

/* shared bits */
.chip {
  font-family: var(--mono); font-size: 10.5px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.chip.ok { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--accent-soft); }
.chip.err { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: var(--danger-soft); }
.chip.stale { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.btn {
  padding: 5px 12px; border-radius: 7px; font-weight: 550;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.btn:hover { border-color: var(--faint); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="dark"] .btn.primary { color: #0c1f14; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.toggled { background: var(--sel); border-color: var(--border-strong); }

.hidden { display: none !important; }
.empty-note { padding: 30px; color: var(--faint); text-align: center; font-size: 12.5px; }