/* ───────────────────────── shell ───────────────────────── */
#stack {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-start;
  padding: 4px 16px 14px; overflow-x: auto; scrollbar-width: none;
  max-height: 40vh; overflow-y: auto;
}
#stack::-webkit-scrollbar { display: none; }
#stack.collapsed { display: none; }
.col { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px;
       width: 156px; }
.pcard {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--wash); border: 0; border-radius: var(--r-md);
  padding: 10px 12px; transition: background var(--ease);
}
.pcard:hover { background: var(--wash-2); }
.pcard.on { background: var(--surface); box-shadow: var(--shadow); }
.pcard.dead { cursor: default; opacity: .55; }
.pcard .pt { font-size: 13px; font-weight: 550; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.pcard .pm { font-size: 11.5px; color: var(--muted); display: flex;
             align-items: center; gap: 5px; margin-top: 2px; }
.pcard .run-dot { width: 6px; height: 6px; border-radius: 50%;
                  background: var(--accent); flex: 0 0 auto; }
.stack-empty { color: var(--muted); font-size: 13px; padding: 6px 2px; }

/* The terminal is the one place monospace and density are correct — but it
   sits in a rounded surface rather than running to the edges of the window. */
#termwrap { flex: 1 1 auto; min-height: 0; margin: 0 16px;
            padding: 12px 4px 4px 14px; background: var(--sunken);
            border-radius: var(--r-md) var(--r-md) 0 0; }
.xterm { height: 100%; }
.xterm-viewport { overscroll-behavior: contain; background: transparent !important; }

#keys {
  flex: 0 0 auto; display: flex; gap: 7px; overflow-x: auto;
  padding: 12px 16px calc(12px + var(--safe-b));
  scrollbar-width: none;
}
#keys::-webkit-scrollbar { display: none; }
.key {
  flex: 0 0 auto; min-width: 44px; padding: 10px 13px; font-size: 13px;
  font-weight: 550; background: var(--wash); color: var(--dim);
  border: 0; border-radius: var(--r-md); cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: background var(--ease), color var(--ease);
}
.key:hover { background: var(--wash-2); color: var(--text); }
.key:active, .key.on { background: var(--accent); color: var(--accent-ink); }